// skills/components/CreateSpaceDialog.tsx
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';

export function CreateSpaceDialog(props: {
  open: boolean;
  onOpenChange: (v: boolean) => void;
  value: string;
  onChange: (v: string) => void;
  onCreate: () => void;
  onCancel: () => void;
}) {
  return (
    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Create New Skill Space</DialogTitle>
          <DialogDescription>Organize and manage your skills.</DialogDescription>
        </DialogHeader>
        <div className="py-4">
          <label className="text-sm font-medium mb-2 block">Space Name</label>
          <Input value={props.value} onChange={(e) => props.onChange(e.target.value)} />
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={props.onCancel}>Cancel</Button>
          <Button onClick={props.onCreate} disabled={!props.value.trim()}>Create</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}