// DatePopoverCalendar.tsx
import {
    Button,
    Calendar,
    Card,
    CardAction,
    CardContent,
    CardDescription,
    CardFooter,
    CardHeader,
    CardTitle,
    PopoverContent,
} from "@repo/shadcn-ui/components";
import { useTranslation } from "../../../locales/i18n.ts";

export function DatePopoverCalendar({
    contentId,
    label,
    description,
    parsedDate,
    onSelect,
    onToday,
    onClose,
    ...calendarProps
}: {
    contentId: string;
    label?: string;
    description?: string;
    parsedDate: Date | null;
    onSelect: (date: Date | undefined) => void;
    onToday: () => void;
    onClose: () => void;
} & Omit<React.ComponentProps<typeof Calendar>, "mode" | "selected" | "onSelect">) {
    const { t } = useTranslation();
    return (
        <PopoverContent id={contentId} className="w-auto p-0">
            <Card className="border-none shadow-none">
                <CardHeader className="border-b">
                    <CardTitle>{label}</CardTitle>
                    <CardDescription>{description || "\u00A0"}</CardDescription>
                    <CardAction>
                        <Button
                            size="sm"
                            variant="outline"
                            onClick={onToday}
                        >
                            {t("components.date_picker_input_field.today")}
                        </Button>
                    </CardAction>

                </CardHeader>

                <CardContent className='px-0'>
                    <Calendar
                        selected={parsedDate ?? undefined}
                        defaultMonth={parsedDate ?? undefined}
                        onSelect={onSelect}
                        mode='single'
                        numberOfMonths={2}

                    />
                </CardContent>

                <CardFooter className='mx-auto'>
                    <Button
                        size="sm"
                        variant="outline"
                        onClick={onClose}>
                        {t("components.date_picker_input_field.close")}
                    </Button>
                </CardFooter>

            </Card>
        </PopoverContent >
    );
}
