"use client";
// components/modals/ui/ModalShell.tsx

import { X } from "lucide-react";

export function ModalShell({
    open,
    onClose,
    children,
    footer,
}: {
    open: boolean;
    onClose: () => void;
    children: React.ReactNode;
    footer?: React.ReactNode;
}) {
    if (!open) return null;

    return (
        <div className="fixed inset-0 z-[100] flex items-end sm:items-center justify-center">
            <div className="absolute inset-0 bg-black/40" onClick={onClose} />
            <div className="relative bg-[#f7f7f8] w-full h-full sm:h-auto sm:max-h-[92vh] sm:max-w-[480px] sm:rounded-3xl overflow-hidden flex flex-col shadow-2xl">
                {/* Close button */}
                <button
                    onClick={onClose}
                    className="absolute top-4 right-4 z-10 w-9 h-9 rounded-full bg-white border border-[#e5e7eb] flex items-center justify-center text-[#4b5563] hover:bg-[#f7f7f8] cursor-pointer transition-colors"
                >
                    <X size={18} />
                </button>

                {/* Scrollable content */}
                <div className="flex-1 overflow-hidden pb-4">
    {children}
</div>

                {/* Sticky footer */}
                {footer && (
                    <div className="bg-white border-t border-[#e5e7eb] px-6 py-4">{footer}</div>
                )}
            </div>
        </div>
    );
}

export function StepProgress({ step, total }: { step: number; total: number }) {
    return (
        <div className="flex gap-2 px-6 pt-6 pb-1">
            {Array.from({ length: total }).map((_, i) => (
                <div
                    key={i}
                    className={`h-1 flex-1 rounded-full transition-all duration-300 ${
                        i < step ? "bg-[#d4537e]" : "bg-[#e5d4dc]"
                    }`}
                />
            ))}
        </div>
    );
}

export function StepEyebrow({ children }: { children: React.ReactNode }) {
    return (
        <div className="px-6 mt-5 flex justify-center">
            <span className="inline-block text-[11px] font-bold tracking-widest text-[#d4537e] border border-[#f3c7d6] bg-white rounded-full px-4 py-1.5">
                {children}
            </span>
        </div>
    );
}

export function InfoBanner({ children }: { children: React.ReactNode }) {
    return (
        <div className="mx-6 mt-5 bg-[#fceef3] border border-[#f3c7d6] rounded-2xl px-4 py-3.5 flex items-start gap-2">
            <span className="text-[#d4537e] text-sm mt-px flex-shrink-0">ⓘ</span>
            <p className="text-sm text-[#a8527a] leading-relaxed">{children}</p>
        </div>
    );
}

export function SaveButton({
    onClick,
    loading,
    disabled,
    label = "Next",
}: {
    onClick: () => void;
    loading?: boolean;
    disabled?: boolean;
    label?: string;
}) {
    return (
        <button
            onClick={onClick}
            disabled={disabled || loading}
            className="w-full py-4 rounded-2xl text-base font-semibold text-white bg-[#d4537e] hover:bg-[#b83d68] disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition-colors"
        >
            {loading ? "Saving..." : label}
        </button>
    );
}