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

interface NotificationSettingsProps {
  notificationFrequency: string;
  reminderFrequency: number;
  onNotificationFrequencyChange: (frequency: string) => void;
  onReminderFrequencyChange: (hours: number) => void;
}

export function NotificationSettings({
  notificationFrequency,
  reminderFrequency,
  onNotificationFrequencyChange,
  onReminderFrequencyChange
}: NotificationSettingsProps) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div className="space-y-2">
        <Label htmlFor="notification-frequency">Notification Frequency</Label>
        <Select value={notificationFrequency} onValueChange={onNotificationFrequencyChange}>
          <SelectTrigger id="notification-frequency">
            <SelectValue placeholder="Select frequency" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="Immediate">Immediate</SelectItem>
            <SelectItem value="Hourly">Hourly</SelectItem>
            <SelectItem value="Daily">Daily</SelectItem>
            <SelectItem value="Weekly">Weekly</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div className="space-y-2">
        <Label htmlFor="reminder-frequency">Reminder Frequency (hours)</Label>
        <Input
          id="reminder-frequency"
          type="number"
          min="1"
          max="168"
          value={reminderFrequency}
          onChange={(e) => onReminderFrequencyChange(parseInt(e.target.value) || 12)}
        />
      </div>
    </div>
  );
}

