import React from "react";
import Image from "next/image";

export interface CustomTestimonialCardProps extends React.HTMLAttributes<HTMLDivElement> {
  quote: string;
  author: string;
  role?: string;
  avatar?: string;
  rating?: number;
  lineClamp?: boolean;
}

export const CustomTestimonialCard = React.forwardRef<HTMLDivElement, CustomTestimonialCardProps>(
  ({ quote, author, role, avatar, rating, lineClamp, className, ...props }, ref) => {
    return (
      <div
        ref={ref}
        className={`flex flex-col p-6 bg-white border border-neutral-200 rounded-2xl shadow-sm transition-shadow ${className || ""}`}
        {...props}
      >
        <div className="flex-1">
          {rating && (
            <div className="flex gap-1 mb-4 text-yellow-400">
              {Array.from({ length: 5 }).map((_, i) => (
                <svg
                  key={i}
                  className={`w-5 h-5 ${i < rating ? "fill-current" : "text-neutral-200 fill-current"}`}
                  viewBox="0 0 20 20"
                >
                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                </svg>
              ))}
            </div>
          )}
          <p className={`text-neutral-700 italic leading-relaxed ${lineClamp ? "line-clamp-4" : ""}`}>
            &quot;{quote}&quot;
          </p>
        </div>
        
        <div className="flex items-center gap-4 mt-6">
          {avatar ? (
            <Image
              src={avatar}
              alt={author}
              width={48}
              height={48}
              className="rounded-full object-cover w-12 h-12"
            />
          ) : (
            <div className="w-12 h-12 rounded-full bg-neutral-200 flex items-center justify-center text-neutral-500 font-bold">
              {author.charAt(0)}
            </div>
          )}
          <div className="flex flex-col">
            <span className="font-semibold text-neutral-900">{author}</span>
            {role && <span className="text-sm text-neutral-500">{role}</span>}
          </div>
        </div>
      </div>
    );
  }
);

CustomTestimonialCard.displayName = "CustomTestimonialCard";