'use client';

import React, { useEffect, useRef } from 'react';

export function CommunityDialog({ title, busy, onClose, children }: {
  title: string; busy: boolean; onClose: () => void; children: React.ReactNode;
}) {
  const ref = useRef<HTMLDialogElement>(null);
  useEffect(() => {
    const dialog = ref.current;
    dialog?.showModal();
    return () => dialog?.close();
  }, []);
  return (
    <dialog ref={ref} aria-label={title} onCancel={(event) => {
      event.preventDefault();
      if (!busy) onClose();
    }} className="w-[calc(100%_-_2rem)] max-w-lg rounded-2xl border border-brand-border bg-brand-card p-6 text-on-surface backdrop:bg-black/80">
      <h2 className="font-headline text-xl font-bold mb-4">{title}</h2>
      {children}
      <button type="button" disabled={busy} onClick={onClose}
        className="mt-4 px-4 py-2 rounded-lg border border-brand-border disabled:opacity-50">Cancel</button>
    </dialog>
  );
}

export const communityInput = 'w-full rounded-lg border border-brand-border bg-brand-bg px-3 py-2 text-on-surface focus:outline-none focus:border-brand-cyan';
export const communityButton = 'rounded-lg border border-brand-border px-4 py-2 text-sm hover:border-brand-cyan focus-visible:outline focus-visible:outline-brand-cyan disabled:opacity-50 disabled:cursor-not-allowed';