"use client";

import Image from "next/image";
import Link from "next/link";
import { ArrowRight } from "lucide-react";

interface ProductCardProps {
  title: string;
  name: string;
  image: string;
  slug: string;
  status: "full" | "empty" | "withOrder";
}

export default function ProductCard({
  title,
  name,
  image,
  slug,
  status,
}: ProductCardProps) {
  const statusColor =
    status === "full"
      ? "text-green-500"
      : status === "empty"
        ? "text-red-600"
        : "text-yellow-800";

  const statusText =
    status === "full"
      ? "Sotuvda mavjud"
      : status === "empty"
        ? "Sotuvda qolmagan"
        : "Buyurtma asosida";
  return (
    <Link href={`/products/${slug}`}>
      <article className="group transition-all duration-300 hover:cursor-pointer max-sm:max-w-100 max-sm:mx-auto max-sm:w-full ">
        {/* Image Container */}
        <div className="relative rounded-2xl h-45 sm:h-55 md:h-65 lg:w-[95%] w-[90%] mx-auto overflow-hidden bg-white">
          <Image
            src={image || "/placeholder.svg"}
            alt={title}
            fill
            className="object-contain transition-transform duration-300"
          />
        </div>

        {/* Content Container */}
        <div className="p-6 sm:p-4">
          {/* Title */}
          <h3 className="text-lg sm:text-xl md:text-2xl font-bold text-white mb-4 line-clamp-3 group-hover:text-red-400 transition-colors duration-300">
            {title}
          </h3>

          {/* Meta Information */}
          <div className="flex flex-col items-start gap-0 text-gray-400 text-sm sm:text-base mb-6">
            <span className="font-medium">{name}</span>
            <span className={`font-medium ${statusColor}`}>{statusText}</span>
          </div>

          {/* Read More Link */}
          <span className="inline-flex items-center gap-2 text-red-600 font-bold text-base sm:text-lg uppercase tracking-wide hover:gap-4 transition-all duration-300 group/link">
            Read More
            <ArrowRight className="w-5 h-5 transition-transform duration-300 group-hover/link:translate-x-1" />
          </span>
        </div>
      </article>
    </Link>
  );
}