import ArrowRightS from "@/components/icons/ArrowRightS";
import { Button } from "@mui/material";
import ButtonData from "./ButtonData";
import TextLoading from "@/app/component/loading/Text";

function Head({ user, setIsTurnsDetails, loading }) {
  return (
    <div className="hidden md:flex flex-wrap gap-x-[24px] gap-y-[12px] items-center justify-between">
      <div className="flex items-center justify-start gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px]">
        <Button
          onClick={() => setIsTurnsDetails(false)}
          className="!p-[6px] !border !border-solid !border-[#EFEFEF] !rounded-[4px] !min-w-0"
        >
          <ArrowRightS />
        </Button>
        <TextLoading width={70} height={20} loading={loading}>
          <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
            جزئیات نوبت شما
          </p>
        </TextLoading>
      </div>
      <ButtonData loading={loading} />
    </div>
  );
}

export default Head;