import type { Testimonial } from "@/lib/types";
import { Card, CardContent } from "@/components/ui/card";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import StarRating from "./star-rating";
import Link from "next/link";
import { Quote } from "lucide-react";

interface TestimonialCardProps {
    testimonial: Testimonial;
}

export default function TestimonialCard({ testimonial }: TestimonialCardProps) {
    return (
        <Card>
            <CardContent className="p-6">
                <Quote className="mb-4 h-8 w-8 text-accent/50" />
                <p className="mb-4 text-muted-foreground italic">"{testimonial.comment}"</p>
                <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                        <Avatar>
                            <AvatarImage src={testimonial.userAvatar} alt={testimonial.userName} />
                            <AvatarFallback>{testimonial.userName.charAt(0)}</AvatarFallback>
                        </Avatar>
                        <div>
                            <p className="font-semibold text-primary">{testimonial.userName}</p>
                            <Link href={`/businesses/${testimonial.businessSlug}`} className="text-xs text-accent hover:underline">
                                on {testimonial.businessName}
                            </Link>
                        </div>
                    </div>
                    <StarRating rating={testimonial.rating} />
                </div>
            </CardContent>
        </Card>
    );
}