"use client";

import { useId, useState } from "react";
import { Button } from "@/components/ui/button";

type DialogProps = {
  triggerLabel: string;
  title: string;
  description?: string;
  children: React.ReactNode;
};

export function Dialog({ triggerLabel, title, description, children }: DialogProps) {
  const [open, setOpen] = useState(false);
  const titleId = useId();
  const descriptionId = useId();

  return (
    <>
      <Button variant="secondary" size="sm" onClick={() => setOpen(true)}>
        {triggerLabel}
      </Button>

      {open ? (
        <div className="fixed inset-0 z-50 grid place-items-center bg-[#0e1e3d]/40 px-4">
          <div
            className="w-full max-w-lg rounded-2xl bg-white p-6 shadow-xl"
            role="dialog"
            aria-modal="true"
            aria-labelledby={titleId}
            aria-describedby={description ? descriptionId : undefined}
          >
            <div className="mb-4 flex items-start justify-between gap-4">
              <div>
                <h2 id={titleId} className="text-lg font-semibold text-[#1c2840]">
                  {title}
                </h2>
                {description ? (
                  <p id={descriptionId} className="mt-1 text-sm text-[#65718a]">
                    {description}
                  </p>
                ) : null}
              </div>
              <button
                className="rounded-md px-2 py-1 text-sm text-[#5f6b84] hover:bg-[#eef2f8]"
                onClick={() => setOpen(false)}
                type="button"
              >
                Close
              </button>
            </div>
            <div>{children}</div>
          </div>
        </div>
      ) : null}
    </>
  );
}
