"use client"
import { useState } from "react"
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import "@/app/styles/datepicker.scss";
import { ar } from "date-fns/locale";

const CustomDatePicker = () => {
    const [startDate, setStartDate] = useState<Date | null>(null);

    const shortArabicLocale: typeof ar = {
        ...ar,
        localize: {
            ...ar.localize,
            day: (n: number): string => {
                const shortDays = ["أح", "اث", "ث", "أر", "خ", "ج", "س"];
                return shortDays[n];
            },
        },
    };
    return (
        <div className="relative">
            <DatePicker
                selected={startDate}
                onChange={(date: Date | null) => setStartDate(date)}
                placeholderText="يوم - شهر - سنة"
                dateFormat="dd-MM-yyyy"
                className="border p-2 rounded"
                locale={shortArabicLocale}
            />
            <div className="absolute left-3 top-1/2 -translate-y-1/2">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z" stroke="#90A1B9" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
            </div>
        </div>
    )
}

export default CustomDatePicker;