"use client";
import React from "react";
import {CalendarNormal} from "./CalendarNormal";
import {CalendarHijri} from "./CalendarHijri";
import {Label} from "./ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "./ui/select";

export default function SelectCalendar({
  date,
  setDate,
}: {
  date: Date | undefined;
  setDate: React.Dispatch<React.SetStateAction<Date | undefined>>;
}) {
  const [dropdown, setDropdown] = React.useState<"persian" | "general">(
    "general"
  );
 
  return (
    <div className="flex items-start justify-start gap-x-4">
      <div className="flex flex-col gap-3 flex-1">
        <Label htmlFor="dropdown" className="px-1">
          نوع تقویم را انتخاب کنید
        </Label>
        <Select
        dir="rtl"
          value={dropdown}
          onValueChange={(value) => setDropdown(value as "general" | "persian")}
        >
          <SelectTrigger
            id="dropdown"
            size="sm"
            className="bg-white w-full"
          >
            <SelectValue placeholder="انتخاب کنید" />
          </SelectTrigger>
          <SelectContent align="center">
            <SelectItem value="general">میلادی</SelectItem>
            <SelectItem value="persian">شمسی</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <div className="flex flex-col gap-3 flex-1">
        <Label htmlFor="date" className="px-1">
          تاریخ تولد
        </Label>

        {dropdown === "general" ? <CalendarNormal date={date} setDate={setDate} /> : <CalendarHijri date={date} setDate={setDate} />}
      </div>
    </div>
  );
}
