import { Card, CardContent, CardFooter } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Star, Quote, Sparkles } from 'lucide-react';

interface TestimonialCardProps {
    testimonial: {
        id: number;
        client_name: string;
        designation?: string;
        company?: string;
        photo?: string;
        message: string;
        rating?: number;
        featured?: boolean;
    };
}

export default function TestimonialCard({ testimonial }: TestimonialCardProps) {
    return (
        <Card className="group relative h-full border-2 hover:border-primary/30 transition-all duration-300 hover:shadow-xl overflow-hidden">
            {/* Background decoration */}
            <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-primary/5 to-transparent rounded-bl-full" />
            
            {/* Quote icon decoration */}
            <Quote className="absolute top-6 right-6 w-16 h-16 text-primary/10 group-hover:text-primary/20 transition-colors" />

            <CardContent className="pt-8 pb-6 relative z-10">
                {/* Rating & Featured */}
                <div className="flex items-center justify-between mb-4">
                    {/* Star rating */}
                    {testimonial.rating && (
                        <div className="flex items-center gap-1">
                            {Array.from({ length: 5 }).map((_, i) => (
                                <Star 
                                    key={i}
                                    className={`w-4 h-4 ${
                                        i < testimonial.rating! 
                                            ? 'fill-amber-400 text-amber-400' 
                                            : 'text-slate-200'
                                    }`}
                                />
                            ))}
                        </div>
                    )}
                    
                    {/* Featured badge */}
                    {testimonial.featured && (
                        <Badge className="bg-gradient-to-r from-amber-500 to-orange-500 border-0">
                            <Sparkles className="w-3 h-3 mr-1" />
                            Featured
                        </Badge>
                    )}
                </div>

                {/* Testimonial message */}
                <p className="text-slate-700 leading-relaxed mb-6 line-clamp-5 italic">
                    "{testimonial.message}"
                </p>
            </CardContent>

            <CardFooter className="border-t bg-slate-50/50 pt-4 relative z-10">
                <div className="flex items-center gap-4 w-full">
                    {/* Client photo */}
                    <div className="flex-shrink-0">
                        {testimonial.photo ? (
                            <img 
                                src={testimonial.photo}
                                alt={testimonial.client_name}
                                className="w-12 h-12 rounded-full object-cover ring-2 ring-primary/20"
                            />
                        ) : (
                            <div className="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-primary/70 flex items-center justify-center text-white font-bold text-lg">
                                {testimonial.client_name.charAt(0).toUpperCase()}
                            </div>
                        )}
                    </div>
                    
                    {/* Client info */}
                    <div className="flex-1 min-w-0">
                        <p className="font-semibold text-slate-900 truncate">
                            {testimonial.client_name}
                        </p>
                        {testimonial.designation && (
                            <p className="text-sm text-slate-600 truncate">
                                {testimonial.designation}
                                {testimonial.company && ` at ${testimonial.company}`}
                            </p>
                        )}
                    </div>
                </div>
            </CardFooter>
        </Card>
    );
}