import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { StarRating } from "@/components/ui/star-rating"
import { formatDistanceToNow } from "date-fns"

interface Review {
    id: number
    user_id: number
    blurb: string
    content: string
    score: number
    created_at: string
}

interface ReviewCardProps {
    review: Review
}

export function ReviewCard({ review }: ReviewCardProps) {
    return (
        <Card>
            <CardHeader className="pb-2">
                <div className="flex justify-between items-start">
                    <div className="space-y-1">
                        <h3 className="font-bold text-lg italic">"{review.blurb}"</h3>
                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
                            <span>User #{review.user_id}</span>
                            <span>•</span>
                            <span>{formatDistanceToNow(new Date(review.created_at), { addSuffix: true })}</span>
                        </div>
                    </div>
                    <StarRating value={review.score} readonly />
                </div>
            </CardHeader>
            <CardContent>
                <p className="text-sm leading-relaxed whitespace-pre-wrap">{review.content}</p>
            </CardContent>
        </Card>
    )
}