"use client";

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";

interface GuideDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

export function GuideDialog({ open, onOpenChange }: GuideDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-3xl max-h-[80vh]">
        <DialogHeader>
          <DialogTitle>Guide</DialogTitle>
        </DialogHeader>
        <div className="overflow-auto max-h-[60vh] pr-4">
          <div className="space-y-4 text-sm">
            <section>
              <h3 className="font-semibold text-base mb-2">2. Fire Alarm/Detection cabinet ; EA51-001</h3>
            </section>

            <section>
              <h3 className="font-semibold text-base mb-2">3. Fire Repeater Panel ; EA51-101, 102, 103</h3>
            </section>

            <section>
              <h3 className="font-semibold text-base mb-2">4. Timer ; EA51-002</h3>
            </section>

            <section>
              <h3 className="font-semibold text-base mb-2">2. Smoke detector 구분</h3>
              <ul className="list-none space-y-1 ml-6">
                <li>a. S11 ; SMOKE DETECTOR(NWT), EA51-XXX-S11-자동채번</li>
                <li>b. S12 ; SMOKE DETECTOR(WT), EA51-XXX-S12-자동채번</li>
                <li>c. S13 ; SMOKE DETECTOR(IS), EA51-XXX-S13-자동채번</li>
              </ul>
            </section>

            <section>
              <h3 className="font-semibold text-base mb-2">2.1 Smoke and Head detecto구분</h3>
              <ul className="list-none space-y-1 ml-6">
                <li>a. SMOKE AND HEAT DETECTOR NWT&quot; = &quot;SH11&quot;</li>
                <li>b. SMOKE?AND HEAT?DETECTOR WT&quot; = &quot;SH12&quot;</li>
                <li>c. SMOKE?AND HEAT?DETECTOR WT IS&quot; = &quot;SH13&quot;</li>
              </ul>
            </section>

            <section>
              <h3 className="font-semibold text-base mb-2">3. Manual Call Point</h3>
              <ul className="list-none space-y-1 ml-6">
                <li>a. M11 ; Manual Call Point(NWT), EA51-XXX-M11-자동채번</li>
                <li>b. M12 ; Manual Call Point R(WT), EA51-XXX-M12-자동채번</li>
                <li>c. M13 ; Manual Call Point(IS), EA51-XXX-M13-자동채번</li>
              </ul>
            </section>

            <section>
              <h3 className="font-semibold text-base mb-2">4. Heat Detector</h3>
              <ul className="list-none space-y-1 ml-6">
                <li>a. H11 ; Heat detector(NWT), EA51-XXX-H11-자동채번</li>
                <li>b. H12A ; Heat detector(WT, 54 Deg), EA51-XXX-H12A-자동채번</li>
                <li>c. H12B; Heat detector(WT, 84 Deg), EA51-XXX-H12B-자동채번</li>
                <li>d. H13 ; Heat detector(IS), EA51-XXX-H13-자동채번</li>
              </ul>
            </section>

            <section>
              <h3 className="font-semibold text-base mb-2">5. Flame Detector</h3>
              <ul className="list-none space-y-1 ml-6">
                <li>a. F11 ; Flame detector(NWT), EA51-XXX-F11-자동채번</li>
                <li>b. F12 ; Flame detector(WT), EA51-XXX-H12-자동채번</li>
                <li>c. F13 ; Flame detector(EX), EA51-XXX-H13-자동채번</li>
              </ul>
            </section>

            <section>
              <h3 className="font-semibold text-base mb-2">5.1 Visual Detector</h3>
              <ul className="list-none space-y-1 ml-6">
                <li>a. VISUAL FLAME IR DETECTOR NWT&quot; = &quot;VF11&quot;</li>
                <li>b. VISUAL FLAME IR DETECTOR WT&quot; = &quot;VF12&quot;</li>
                <li>c. VISUAL FLAME IR DETECTOR WT EX&quot; = &quot;VF13&quot;</li>
              </ul>
            </section>

            <section>
              <h3 className="font-semibold text-base mb-2">6. Magnetic Door Holder ; EA51-XXX-MDH-자동채번</h3>
            </section>

            <section>
              <h3 className="font-semibold text-base mb-2">7. SCI ; Short Circuit Isolator</h3>
              <p className="ml-6">EA51-XXX-SCI-자동채번</p>
            </section>

            <section>
              <h3 className="font-semibold text-base mb-2">8. LM ; Limit Switch</h3>
              <p className="ml-6">EA51-XXX-LM-자동채번</p>
            </section>

            <section>
              <h3 className="font-semibold text-base mb-2">9. ADDR ; Address  Unit</h3>
              <p className="ml-6">EA51-XXX-ADD-자동채번</p>
            </section>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}