import { cn } from "@/lib/utils";
import Image from "next/image";
import { urlFor } from "@/sanity/lib/image";
import { ChevronRight } from "lucide-react";
import { POSTS_QUERY_RESULT } from "@/sanity.types";

type SanityPostItem = NonNullable<POSTS_QUERY_RESULT[number]>;

export interface PostCardProps {
  title?: string | null;
  excerpt?: string | null;
  image?: SanityPostItem["image"] | null;
  className?: string;
}

export default function PostCard({
  className,
  title,
  excerpt,
  image,
}: PostCardProps) {
  return (
    <div
      className={cn(
        "card-luxury group flex w-full flex-col justify-between overflow-hidden rounded-3xl p-5 bg-white border border-brand-border transition-all duration-300 hover:border-brand-gold hover:shadow-xl",
        className,
      )}
    >
      <div className="flex flex-col">
        {image && image.asset?._id ? (
          <div className="mb-4 relative h-[14rem] sm:h-[16rem] md:h-[18rem] rounded-2xl overflow-hidden bg-brand-sand">
            <Image
              src={urlFor(image).url()}
              alt={image.alt || title || "Vietnam Wedding Guide"}
              placeholder={image?.asset?.metadata?.lqip ? "blur" : undefined}
              blurDataURL={image?.asset?.metadata?.lqip || ""}
              fill
              style={{
                objectFit: "cover",
              }}
              className="transition-transform duration-500 group-hover:scale-105"
              sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw"
              quality={90}
            />
            <div className="absolute top-3 left-3">
              <span className="badge-gold px-3 py-1 rounded-full text-xs font-semibold text-brand-dark tracking-wider uppercase backdrop-blur-xs">
                Editorial Guide
              </span>
            </div>
          </div>
        ) : (
          <div className="mb-4 relative h-[10rem] rounded-2xl bg-brand-sand flex items-center justify-center p-4">
            <span className="font-title text-base text-brand-muted tracking-wide">
              Vietnam Wedding Guide
            </span>
          </div>
        )}

        {title && (
          <h3 className="font-title font-bold text-xl leading-snug text-brand-dark group-hover:text-brand-gold transition-colors duration-300 line-clamp-2">
            {title}
          </h3>
        )}

        {excerpt && (
          <p className="mt-2.5 text-sm text-brand-muted leading-relaxed line-clamp-3">
            {excerpt}
          </p>
        )}
      </div>

      <div className="mt-5 pt-4 border-t border-brand-border/60 flex items-center justify-between">
        <span className="text-xs font-semibold text-brand-gold uppercase tracking-wider group-hover:underline">
          Read Guide
        </span>
        <div className="w-8 h-8 rounded-full border border-brand-border flex items-center justify-center text-brand-gold group-hover:bg-brand-gold group-hover:text-white transition-all duration-300">
          <ChevronRight size={16} />
        </div>
      </div>
    </div>
  );
}