import { BlogData } from "@/schema/blog";
import Image from "next/image";
import Link from "next/link";

type CardBlogProps = {
  colorPreset?: 1 | 2;
  isDescriptionVisible?: boolean;
  data: BlogData;
};

export default function CardBlog({ data, colorPreset = 1, isDescriptionVisible = true }: CardBlogProps) {
  const linkDetail = `/blog/${data.slug}`;

  if (colorPreset === 2) {
    return (
      <div>
        <article className="post-simple">
          <div className="h-64 relative">
            <Link href={linkDetail}>
              <Image src={data.img?.url ?? ""} alt={data.img?.alt ?? ""} fill />
            </Link>
          </div>
          <div className="post-simple-body">
            <div className="post-simple-title">
              <h4>
                <Link href={linkDetail}>{data.title}</Link>
              </h4>
            </div>
            {isDescriptionVisible && !!data?.description && (
              <>
                <div className="post-simple-divider"></div>
                <div className="post-simple-text">
                  <p>{data.description}</p>
                </div>
              </>
            )}
            <div className="post-simple-time">
              <span className="icon mdi mdi-clock"></span>
              <span>{data.posted_at}</span>
            </div>
          </div>
        </article>
      </div>
    );
  }

  return (
    <div>
      <article className="post-default">
        <div className="h-64 relative">
          <Link href={linkDetail}>
            <Image src={data.img?.url ?? ""} alt={data.img?.alt ?? ""} fill />
          </Link>
        </div>
        <div className="post-default-body">
          <div className="post-default-title">
            <h4>
              <Link href={linkDetail}>{data.title}</Link>
            </h4>
          </div>
          {isDescriptionVisible && !!data?.description && (
            <>
              <div className="post-default-divider"></div>
              <div className="post-default-text">
                <p>{data.description}</p>
              </div>
            </>
          )}
          <div className="post-default-time">
            <span className="icon mdi mdi-clock"></span>
            <span>{data.posted_at}</span>
          </div>
        </div>
      </article>
    </div>
  );
}
