'use client';

import Image from 'next/image';
import { StarRating } from './StarRating';

interface TestimonialCardProps {
  text: string;
  author: string;
  role: string;
  rating: number;
}

export function TestimonialCard({ text, author, role, rating }: TestimonialCardProps) {
  // Title snippet: first ~35 chars of the testimonial text (matches mobile behavior)
  const titleSnippet = text.length > 35 ? `${text.slice(0, 35)} ..` : text;
  return (
    <div className="p-4 border border-[#00293D]/10 rounded-[15px] h-full flex flex-col">
      <div className="mb-4">
        <Image
          src="/assets/icons/quote-icon.svg"
          alt="Quote"
          width={23}
          height={13}
          className="mb-3"
        />
        <p className="font-medium text-[#00293D] text-[14px] leading-[17px] font-fractul line-clamp-1">{titleSnippet}</p>
      </div>
      <p className="text-[#00293D] text-[14px] leading-[19px] font-normal font-serif mb-4 flex-1">{text}</p>
      <div className="pt-4 border-t border-[#00293D]/20 space-y-2">
        <StarRating rating={rating} />
        <p className="font-normal text-[#00293D] text-[14px] leading-[17px] font-fractul">{author}</p>
        <p className="font-fractul font-medium text-[14px] leading-[17px] text-[#00293D]">{role}</p>
      </div>
    </div>
  );
}
