'use client';

import Input from '@/components/ui/Input';

interface DurationFieldProps {
  label: string;
  value: number | '';
  onChange: (value: number | '') => void;
  helperText?: string;
  required?: boolean;
  disabled?: boolean;
  unit?: 'minutes' | 'laps';
  error?: string;
}

export default function DurationField({
  label,
  value,
  onChange,
  helperText,
  required,
  disabled,
  unit = 'minutes',
  error,
}: DurationFieldProps) {
  const handleChange = (raw: string) => {
    if (raw.trim() === '') {
      onChange('');
      return;
    }

    const parsed = parseInt(raw, 10);
    if (Number.isNaN(parsed) || parsed <= 0) {
      onChange('');
      return;
    }

    onChange(parsed);
  };

  const unitLabel = unit === 'laps' ? 'laps' : 'min';

  return (
    <div className="space-y-1">
      <label className="block text-sm font-medium text-gray-300">
        {label}
        {required && <span className="text-warning-amber ml-1">*</span>}
      </label>
      <div className="flex items-center gap-2">
        <div className="flex-1">
          <Input
            type="number"
            value={value === '' ? '' : String(value)}
            onChange={(e) => handleChange(e.target.value)}
            disabled={disabled}
            min={1}
            className="pr-16"
            error={!!error}
          />
        </div>
        <span className="text-xs text-gray-400 -ml-14">{unitLabel}</span>
      </div>
      {helperText && (
        <p className="text-xs text-gray-500">{helperText}</p>
      )}
      {error && (
        <p className="text-xs text-warning-amber mt-1">{error}</p>
      )}
    </div>
  );
}