'use client';

import { Quote } from 'lucide-react';
import { InkGlowCard } from '@/components/ui/ink-glow-card';

interface TestimonialBlockProps {
  quote: string;
  author: string;
  title: string;
  company: string;
  index: number;
}

export function TestimonialBlock({ quote, author, title, company, index }: TestimonialBlockProps) {
  return (
    <InkGlowCard
      index={index}
      accentColorRgb="196, 30, 58"
      glowStart="#C41E3A"
      glowEnd="#D97706"
    >
      <div className="p-6 md:p-8">
        <Quote className="w-7 h-7 text-[#C41E3A]/15 mb-5" />
        <blockquote className="text-[#1C1C1C] leading-relaxed mb-6 text-base">
          &ldquo;{quote}&rdquo;
        </blockquote>
        <div className="flex items-center gap-3 pt-4 border-t border-[#F0F0F0]">
          <div className="w-9 h-9 rounded-full bg-[#FAFAFA] flex items-center justify-center text-[#C41E3A] font-semibold text-sm">
            {author.charAt(0)}
          </div>
          <div>
            <div className="text-sm font-semibold text-[#1C1C1C]">{author}</div>
            <div className="text-xs text-[#A3A3A3]">{title}，{company}</div>
          </div>
        </div>
      </div>
    </InkGlowCard>
  );
}