import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Input } from '@/components/ui/input';

interface AnalyticsSettingsFormProps {
  defaultPeriod: string;
  refreshInterval: number;
  onDefaultPeriodChange: (period: string) => void;
  onRefreshIntervalChange: (interval: number) => void;
}

export function AnalyticsSettingsForm({
  defaultPeriod,
  refreshInterval,
  onDefaultPeriodChange,
  onRefreshIntervalChange
}: AnalyticsSettingsFormProps) {
  const periodOptions = [
    'Today',
    'This Week',
    'This Month',
    'Last Month',
    'This Quarter',
    'This Year',
    'Custom Range'
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div className="space-y-2">
        <Label htmlFor="default-period">Default Reporting Period</Label>
        <Select value={defaultPeriod} onValueChange={onDefaultPeriodChange}>
          <SelectTrigger id="default-period">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {periodOptions.map((period) => (
              <SelectItem key={period} value={period}>
                {period}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      <div className="space-y-2">
        <Label htmlFor="refresh-interval">Auto-Refresh Interval (minutes)</Label>
        <Input
          id="refresh-interval"
          type="number"
          min="1"
          max="60"
          value={refreshInterval}
          onChange={(e) => onRefreshIntervalChange(parseInt(e.target.value) || 5)}
        />
      </div>
    </div>
  );
}

