"use client"
import {Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle} from "@/shared/ui/dialog";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue
} from "@/shared/ui/select";
import {Input} from "@/shared/ui/input";
import {Textarea} from "@/shared/ui/textarea";
import React from "react";
import {Button} from "@/shared/ui/button";
import {Service} from "@/shared/types/services";
import { useTranslations } from "next-intl";

interface ServiceModalProps {
  selectedService: Service | null;
  setSelectedService: (service: Service | null) => void;
}

const ServiceModal = ({selectedService, setSelectedService}: ServiceModalProps) => {
  const t = useTranslations("")
  return (
      <Dialog open={!!selectedService} onOpenChange={
        (open) => {
          if (!open) {
            setSelectedService(null)
          }
        }
      }>
        <DialogContent className={"min-w-4/12"}>
          <DialogHeader>
            <DialogTitle>{selectedService?.name}</DialogTitle>
            <DialogDescription className={"space-y-5 mt-5"}>
              <Select>
                <SelectTrigger className={"w-full"}>
                  <SelectValue placeholder={t("Viloyat")}/>
                </SelectTrigger>
                <SelectContent>
                  <SelectGroup>
                    <SelectLabel>{t("Viloyat")}</SelectLabel>
                    <SelectItem value="pineapple">Pineapple</SelectItem>
                  </SelectGroup>
                </SelectContent>
              </Select>
              <Select>
                <SelectTrigger className={"w-full"}>
                  <SelectValue placeholder={t("Tuman")}/>
                </SelectTrigger>
                <SelectContent>
                  <SelectGroup>
                    <SelectLabel>{t("Tuman")}</SelectLabel>
                    <SelectItem value="pineapple">Pineapple</SelectItem>
                  </SelectGroup>
                </SelectContent>
              </Select>

              <Input placeholder={t("Telefon raqamingiz")}/>
              <Input placeholder={t("full_name")}/>
              <Textarea placeholder="Type your message here."/>
              <div className={"text-end"}>
                <Button size={"lg"}>{t("Ariza yuborish")}</Button>
              </div>
            </DialogDescription>
          </DialogHeader>
        </DialogContent>
      </Dialog>
  )
}

export default ServiceModal