import React from "react";
import { Star, Eye } from "lucide-react";
import type { Review } from "@/types";
import Image from "next/image";

interface ReviewCardProps {
  review: Review;
  onClick: () => void;
}

export default function ReviewCard({ review, onClick }: ReviewCardProps) {
  return (
    <div
      onClick={onClick}
      className="flex-shrink-0 w-[300px] md:w-[360px] bg-white border border-zinc-200/80 rounded-2xl p-6 hover:border-brand-accent/60 hover:shadow-[0_12px_40px_rgba(0,0,0,0.05)] transition-all duration-300 cursor-pointer group flex flex-col justify-between"
    >
      <div>
        {/* Rating */}
        <div className="flex gap-1 mb-3">
          {[...Array(5)].map((_, i) => (
            <Star
              key={i}
              size={15}
              className={`${
                i < review.rating ? "fill-brand-accent text-brand-accent" : "text-zinc-250"
              }`}
            />
          ))}
        </div>

        {/* Review Text */}
        <p className="text-zinc-700 text-sm font-medium leading-relaxed mb-5 line-clamp-3">
          &quot;{review.content}&quot;
        </p>
      </div>

      {/* Reviewer Meta */}
      <div className="flex items-center justify-between mt-auto">
        <div className="flex flex-col">
          <span className="text-zinc-900 text-xs font-bold">{review.customer_name}</span>
          <span className="text-[10px] text-zinc-550 font-semibold uppercase tracking-wider">
            Verified Buyer
          </span>
        </div>
        {review.image_url && (
          <div className="relative w-12 h-12 rounded-xl overflow-hidden border border-zinc-100 group-hover:border-brand-accent/40 transition-colors">
            <Image
              src={review.image_url}
              alt="Review upload"
              fill
              className="object-cover"
            />
            <div className="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
              <Eye size={14} className="text-white" />
            </div>
          </div>
        )}
      </div>
    </div>
  );
}