"use client";

import { Infographic } from "@/types/infographic";
import Image from "next/image";
import Link from "next/link";

const SingleInfographic = ({ infographic }: { infographic: Infographic }) => {
  const { id, title, slug, description, featureimg, content, topic, formatedDate } = infographic;

  return (
    <div className="mt-5 group shadow-one hover:shadow-two dark:bg-dark dark:hover:shadow-gray-dark relative overflow-hidden rounded-xs bg-white duration-300">
        <Link
          href={`/infographic/${slug}`}
          className="relative block aspect-37/22 w-full"
        >
          <span className="bg-primary absolute top-6 right-6 z-20 inline-flex items-center justify-center rounded-full px-4 py-2 text-sm font-semibold text-white capitalize">
            {topic.title}
          </span>
          <Image src={featureimg} alt="image" fill />
        </Link>
        <div className="p-6 sm:p-8 md:px-6 md:py-8 lg:p-8 xl:px-5 xl:py-8 2xl:p-8">
          <h3 className="overflow-hidden text-ellipsis [display:-webkit-box] [-webkit-line-clamp:2] [-webkit-box-orient:vertical]">
            <Link
              href={`/infographic/${slug}`}
              className="min-h-[64px] hover:text-primary dark:hover:text-primary mb-4 block text-xl font-bold text-black sm:text-2xl dark:text-white"
            >
              {title}
            </Link>
          </h3>
          <p>{formatedDate}</p>
          <p className="border-body-color/10 text-body-color mb-6 text-base font-medium dark:border-white/10 overflow-hidden text-ellipsis [display:-webkit-box] [-webkit-line-clamp:3] [-webkit-box-orient:vertical]"
            dangerouslySetInnerHTML={{
              __html: description,
            }} />
        </div>
      </div>
  );
};

export default SingleInfographic;