"use client";

import { ReactNode } from "react";

export function TeacherModal({
  open,
  onClose,
  title,
  subtitle,
  children,
  footer,
  size = "md",
}: {
  open: boolean;
  onClose: () => void;
  title: string;
  subtitle?: string;
  children: ReactNode;
  footer?: ReactNode;
  size?: "sm" | "md" | "lg" | "xl";
}) {
  if (!open) return null;

  const width =
    size === "sm" ? "max-w-sm" : size === "xl" ? "max-w-3xl" : size === "lg" ? "max-w-2xl" : "max-w-md";

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/45 p-4 backdrop-blur-[2px]">
      <div
        className={`w-full ${width} overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-2xl`}
        role="dialog"
        aria-modal="true"
      >
        <div
          className="flex items-start justify-between gap-3 px-5 py-4 text-white"
          style={{ background: "var(--header-gradient)" }}
        >
          <div>
            <h3 className="text-lg font-bold">{title}</h3>
            {subtitle ? <p className="mt-0.5 text-sm text-white/85">{subtitle}</p> : null}
          </div>
          <button
            type="button"
            className="flex h-8 w-8 items-center justify-center rounded-lg bg-white/15 text-xl leading-none hover:bg-white/25"
            onClick={onClose}
            aria-label="بستن"
          >
            ×
          </button>
        </div>
        <div className="max-h-[min(72vh,40rem)] overflow-y-auto p-5">{children}</div>
        {footer ? <div className="border-t border-slate-100 bg-slate-50/80 p-4">{footer}</div> : null}
      </div>
    </div>
  );
}