'use client';

import { useState } from "react";
import Tabs from "../../Tabs";
import Hours from "./Hours";
import { Button } from "@mui/material";
import ArrowLeftB from "@/components/icons/ArrowLeftB";
import Link from "next/link";

const listTab = ['صبح', 'بعد از ظهر'];
const nameHours = ['hours_morning', 'hours_afternoon']

function DateTime({ doctor }) {

  const [value, setValue] = useState(0);
  const [hour, setHour] = useState(0);

  const handleChange = (event, newValue) => setValue(newValue);

  return (
    <div className="w-full">
      <Tabs
        isSm={true}
        value={value}
        listTab={listTab}
        handleChange={handleChange}
      />
      <Hours
        hour={hour}
        value={value}
        doctor={doctor}
        setHour={setHour}
        nameHours={nameHours}
      />
      <Link
        href='/login-verify'
        className="w-full flex justify-end"
      >
        <Button
          className="!gap-[4px] !px-[12px] !py-[8px] md:!py-[9px] !w-full md:!w-fit !min-w-[157px]"
          onClick={() =>
            localStorage.setItem('doctor-id', doctor?.id)
          }
          variant="contained"
        >
          <p className="text-[#EFEFEF] text-[16px] font-medium">تایید نوبت</p>
          <ArrowLeftB />
        </Button>
      </Link>
    </div>
  )
}

export default DateTime