import { Quote } from 'lucide-react';

import * as React from 'react';

import { Card, CardContent } from '@/Components/ui/card';
import { cn } from '@/lib/utils';

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

export const TestimonialCard = React.forwardRef<HTMLDivElement, TestimonialCardProps>(
  ({ quote, author, role, company, className }, ref) => {
    return (
      <Card ref={ref} className={cn('h-full', className)}>
        <CardContent className="p-6">
          <Quote className="mb-4 h-8 w-8 text-primary opacity-20" aria-hidden="true" />
          <blockquote className="mb-4 text-base leading-relaxed text-foreground">
            "{quote}"
          </blockquote>
          <footer className="mt-4 border-t pt-4">
            <cite className="not-italic">
              <div className="font-semibold text-foreground">{author}</div>
              <div className="text-sm text-muted-foreground">
                {role}
                {company && <> · {company}</>}
              </div>
            </cite>
          </footer>
        </CardContent>
      </Card>
    );
  },
);
TestimonialCard.displayName = 'TestimonialCard';