import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
import { SettingsDialogProps } from '../types';

export function SettingsDialog({ open, onOpenChange, rareItemPath, onRareItemPathChange, onSave }: SettingsDialogProps) {
    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="sm:max-w-[600px]">
                <DialogHeader>
                    <DialogTitle>Settings</DialogTitle>
                    <DialogDescription>
                        Configure the path to rare_item.conf file
                    </DialogDescription>
                </DialogHeader>

                <div className="space-y-4 py-4">
                    <div className="space-y-2">
                        <Label htmlFor="rareItemPath">Rare Item Config Path</Label>
                        <Input
                            id="rareItemPath"
                            value={rareItemPath}
                            onChange={(e) => onRareItemPathChange(e.target.value)}
                            placeholder="/home/gamed/config/rare_item.conf"
                            className="font-mono"
                        />
                        <p className="text-xs text-muted-foreground">
                            This path will be used for loading and saving rare_item.conf file
                        </p>
                    </div>
                </div>

                <DialogFooter>
                    <Button variant="outline" onClick={() => onOpenChange(false)}>
                        Cancel
                    </Button>
                    <Button onClick={onSave}>
                        Save Settings
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}