import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Zap, Clock } from 'lucide-react';

interface PriorityTATSettingsProps {
  expressHours: number;
  standardHours: number;
  onExpressChange: (hours: number) => void;
  onStandardChange: (hours: number) => void;
}

export function PriorityTATSettings({
  expressHours,
  standardHours,
  onExpressChange,
  onStandardChange
}: PriorityTATSettingsProps) {
  return (
    <Card className="border-0 shadow-sm">
      <CardHeader className="pb-3">
        <div className="flex items-center gap-2">
          <Zap className="w-5 h-5 text-re-green" />
          <CardTitle className="text-base font-semibold">Priority TAT Settings</CardTitle>
        </div>
        <CardDescription className="text-sm">
          Set default turnaround time in hours for each priority level
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="space-y-2">
            <Label htmlFor="tat-express" className="text-sm font-medium">
              Express Priority (hours)
            </Label>
            <Input
              id="tat-express"
              type="number"
              min="1"
              max="168"
              value={expressHours}
              onChange={(e) => onExpressChange(parseInt(e.target.value) || 24)}
              className="border-gray-200 focus:border-re-green focus:ring-2 focus:ring-re-green/20"
            />
            <p className="text-xs text-muted-foreground flex items-center gap-1">
              <Clock className="w-3 h-3" />
              Critical/Emergency requests (24/7, includes weekends)
            </p>
          </div>

          <div className="space-y-2">
            <Label htmlFor="tat-standard" className="text-sm font-medium">
              Standard Priority (hours)
            </Label>
            <Input
              id="tat-standard"
              type="number"
              min="1"
              max="720"
              value={standardHours}
              onChange={(e) => onStandardChange(parseInt(e.target.value) || 72)}
              className="border-gray-200 focus:border-re-green focus:ring-2 focus:ring-re-green/20"
            />
            <p className="text-xs text-muted-foreground flex items-center gap-1">
              <Clock className="w-3 h-3" />
              Regular priority requests (working hours only, excludes weekends & holidays)
            </p>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}