import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';

export function AddSiteDialog({ open, setOpen, onAdd }: any) {
  const [form, setForm] = useState<any>({});

  return (
    <Dialog open={open} onOpenChange={(o) => setOpen(!o)}>
      <DialogContent className="max-w-lg">
        <DialogHeader><DialogTitle>Add Custom Site</DialogTitle></DialogHeader>
        <div className="space-y-3 py-4">
          <Input placeholder="Name" onChange={e => setForm({...form, name: e.target.value})} />
          <Input placeholder="Base URL" onChange={e => setForm({...form, baseUrl: e.target.value})} />
          <Input placeholder="Search Path (e.g. /posts.json)" onChange={e => setForm({...form, searchPath: e.target.value})} />
          <Input placeholder="Posts JSON Path" onChange={e => setForm({...form, postsPath: e.target.value})} />
          <div className="grid grid-cols-2 gap-2">
            <Input placeholder="id field" onChange={e => setForm({...form, fields.id: e.target.value})} />
            <Input placeholder="previewUrl field" onChange={e => setForm({...form, fields.previewUrl: e.target.value})} />
          </div>
        </div>
        <Button onClick={() => { onAdd(form); setOpen(false); }} className="w-full">Save Site</Button>
      </DialogContent>
    </Dialog>
  );
}