"use client";
import { convertDateFormat, formatTextToHtmlTag } from "@/utils/global";
import Image from "next/image";
import { EyeIcon, EyeIconMdi } from "../icons";

export default function DetailNews(props: { data: any }) {
  const { data } = props;
  return (
    <div className="px-3 md:px-36">
      <div className=" px-1 md:px-3">
        <Image
          width={1100}
          height={500}
          alt="NextUI hero Image"
          src="/detail.png"
        />
      </div>
      <div>
        <div className="md:flex px-1 md:px-6 text-xs lg:text-medium gap-3">
          <p>
            Oleh <b className="capitalize">{data?.createdByName}</b>
          </p>
          <p className="hidden md:block">|</p>
          <p>Diupdate pada {convertDateFormat(data?.createdAt)} WIB</p>
          <p className="hidden md:block">|</p>
          <p className="flex items-center gap-1">
            <EyeIconMdi />
            {data?.viewCount === null ? 0 : data?.viewCount}
          </p>
          <div className="flex gap-2 md:hidden">
            <div>
              <Image height={185} width={185} src="/fb.png" alt="medsos" />
            </div>
            <div>
              <Image height={185} width={185} src="/twitter.png" alt="medsos" />
            </div>
            <div>
              <Image
                height={185}
                width={185}
                src="/linkedin.png"
                alt="medsos"
              />
            </div>
            <div>
              <Image height={185} width={185} src="/wa.png" alt="medsos" />
            </div>
          </div>
        </div>
        <div className="px-1 md:px-5 text-sm md:text-medium space-y-3 py-2">
          <p className="font-bold text-lg">{data?.title}</p>
          <div
            dangerouslySetInnerHTML={formatTextToHtmlTag(data?.htmlDescription)}
          />
        </div>
        <div className="hidden sm:grid grid-cols-5 px-1 md:px-3 pt-10">
          <div>
            <Image height={185} width={185} src="/fb.png" alt="medsos" />
          </div>
          <div>
            <Image height={185} width={185} src="/twitter.png" alt="medsos" />
          </div>
          <div>
            <Image height={185} width={185} src="/linkedin.png" alt="medsos" />
          </div>
          <div>
            <Image height={185} width={185} src="/wa.png" alt="medsos" />
          </div>
        </div>
      </div>
    </div>
  );
}