import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import dayjs, {} from "dayjs";
import "dayjs/locale/es";
import { Card, DatePicker, Button } from "../index";
const DatePickerDocs = () => {
    const [selectedDate, setSelectedDate] = React.useState(null);
    const [anotherDate, setAnotherDate] = React.useState(dayjs());
    const formatDate = (date) => {
        if (!date || !date.isValid())
            return "Sin fecha seleccionada";
        return date.locale("es").format("DD [de] MMMM [de] YYYY");
    };
    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "DatePicker - Selector de fecha con calendario", children: _jsxs("div", { className: "space-y-10", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Uso b\u00E1sico" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 items-start", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(DatePicker, { value: selectedDate ?? undefined, onChange: setSelectedDate }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "selector de fecha sin input, solo calendario" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Fecha seleccionada" }), _jsx(Card, { variant: "outlined", children: _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: formatDate(selectedDate) }) })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Navegaci\u00F3n por meses y a\u00F1os" }), _jsxs("div", { className: "space-y-4", children: [_jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Usa los botones con flechas para cambiar de mes o de a\u00F1o. El d\u00EDa actual se resalta con un borde, y el d\u00EDa seleccionado se marca con el color primario." }), _jsx(DatePicker, { value: anotherDate ?? undefined, onChange: setAnotherDate, startWeekOn: "monday" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: formatDate(anotherDate) }), _jsx(Button, { size: "sm", variant: "outline", icon: "fa-calendar-day", onClick: () => setAnotherDate(dayjs()), children: "Ir a hoy" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Inicio de semana configurable" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Semana comenzando en lunes (default)" }), _jsx(DatePicker, { startWeekOn: "monday" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Semana comenzando en domingo" }), _jsx(DatePicker, { startWeekOn: "sunday" })] })] })] })] }) }) }));
};
export default DatePickerDocs;
