'use client';

import { GlowCard } from '@/components/ui/GlowCard';
import { cn } from '@/lib/utils';

interface TestimonialCardProps {
  quote: string;
  name: string;
  role: string;
  company: string;
  metric: string;
  className?: string;
}

function getInitials(name: string): string {
  return name
    .split(/\s+/)
    .map((w) => w[0])
    .filter(Boolean)
    .join('')
    .replace(/\./g, '')
    .toUpperCase();
}

const avatarColors = [
  'bg-violet-500/20 text-violet-300',
  'bg-emerald-500/20 text-emerald-300',
  'bg-sky-500/20 text-sky-300',
];

export function TestimonialCard({
  quote,
  name,
  role,
  company,
  metric,
  className,
}: TestimonialCardProps) {
  const colorIdx =
    name.split('').reduce((acc, c) => acc + c.charCodeAt(0), 0) % avatarColors.length;

  return (
    <GlowCard className={cn('border-l-2 border-violet-500 p-6', className)}>
      <span className="bg-emerald-500/10 text-emerald-400 text-xs rounded-full px-2 py-0.5 inline-block mb-4">
        {metric}
      </span>
      <p className="text-sm leading-relaxed text-gray-400 italic mb-6">
        &ldquo;{quote}&rdquo;
      </p>
      <div className="flex items-center gap-3">
        <div
          className={cn(
            'flex h-9 w-9 items-center justify-center rounded-full text-xs font-bold',
            avatarColors[colorIdx],
          )}
        >
          {getInitials(name)}
        </div>
        <div>
          <p className="text-sm font-medium text-white">{name}</p>
          <p className="text-xs text-gray-500">
            {role}, {company}
          </p>
        </div>
      </div>
    </GlowCard>
  );
}
