import { Button } from '@repo/shadcn/button';
import {
    Card,
    CardContent,
    CardDescription,
    CardFooter,
    CardHeader,
    CardTitle,
} from '@repo/shadcn/card';
import { Badge } from '@repo/shadcn/badge';
import { BadgeCheck } from 'lucide-react';
import { SurveyAnswerForUser } from '../schemas/survey';


interface cardProps {
    data: SurveyAnswerForUser;
    onClick: (id: number) => void;
}

export function SurveyCard ({ data, onClick }: cardProps) {
    return (
        <Card key={data.surveys.id} className="flex flex-col">
            <CardHeader>
            <CardTitle>{data.surveys.title}</CardTitle>
            <CardDescription>{data.surveys.description}</CardDescription>
            </CardHeader>
            <CardContent className="flex-grow">
            <section className="space-y-2 text-sm">
                <div className="flex justify-between">
                    <span className="text-muted-foreground">Fecha de creación:</span>
                    <span>{new Date(data.surveys.created_at).toLocaleDateString()}</span>
                </div>
                {data.surveys.closingDate && (
                    <div className="flex justify-between">
                        <span className="text-muted-foreground">Fecha de cierre:</span>
                        <span>{new Date(data.surveys.closingDate).toLocaleDateString()}</span>
                    </div>
                )}
            </section>
            </CardContent>
            <CardFooter className="flex justify-center">
            {data.answers_surveys === null ? (
                <Button className="w-full" onClick={() => onClick(Number(data.surveys.id))}>
                    Responder
                </Button>
            ) : (
                <Badge className="px-4 py-2 w-full  bg-green-600 text-black">
                    <BadgeCheck size={28} />
                    Realizada
                </Badge>
            )}
            </CardFooter>
        </Card>
    )
}