"use client"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"

interface SettingsAreaProps {
  onExport: () => void;
  isExporting?: boolean;
}

export function SettingsArea({ onExport, isExporting }: SettingsAreaProps) {
  return (
    <Card className="border-zinc-200 dark:border-zinc-800">
      <CardHeader>
        <CardTitle>Export Settings</CardTitle>
        <CardDescription>Configure your output.</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
              <div className="space-y-2">
          <Label htmlFor="format">Format</Label>
          <Select defaultValue="pdf">
            <SelectTrigger id="format">
              <SelectValue placeholder="Select format" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="pdf">WEBP</SelectItem>
              <SelectItem value="png">PNG Image</SelectItem>
              <SelectItem value="json">Jpeg</SelectItem>
            </SelectContent>
          </Select>
        </div>

        <div className="pt-4">
          <Button 
            className="w-full font-medium" 
            onClick={onExport}
            disabled={isExporting}
          >
            {isExporting ? "Exporting..." : "Start Export"}
          </Button>
        </div>

      </CardContent>
    </Card>
  )
}