'use client';

import { cn } from '@/lib/utils';
import { Input } from '@/components/ui/input';
import { RATE_TYPE_OPTIONS, type RateType } from '@/lib/rateType';

interface WorkerRatePickerProps {
  amount: string;
  rateType: RateType;
  onAmountChange: (value: string) => void;
  onRateTypeChange: (value: RateType) => void;
  optional?: boolean;
  className?: string;
}

export function WorkerRatePicker({
  amount,
  rateType,
  onAmountChange,
  onRateTypeChange,
  optional = false,
  className,
}: WorkerRatePickerProps) {
  return (
    <div className={cn('space-y-4', className)}>
      <div>
        <p className="text-sm font-medium text-slate-700">
          Your rate {optional && <span className="text-muted font-normal">(optional)</span>}
        </p>
        <p className="text-xs text-muted mt-0.5">
          Customers use this as a guide. You can always change it later in your profile.
        </p>
      </div>

      <Input
        label="Rate amount (₱)"
        type="number"
        min={0}
        step="0.01"
        value={amount}
        onChange={(e) => onAmountChange(e.target.value)}
        placeholder="350"
        className="md:max-w-sm"
      />

      <div className="space-y-2 md:space-y-3">
        <p className="text-sm md:text-base font-medium text-slate-700">Rate period</p>
        <div className="grid grid-cols-2 gap-2 sm:grid-cols-4 md:gap-3">
          {RATE_TYPE_OPTIONS.map((option) => {
            const selected = rateType === option.value;
            return (
              <button
                key={option.value}
                type="button"
                onClick={() => onRateTypeChange(option.value)}
                className={cn(
                  'rounded-xl border px-3 py-2.5 text-sm font-semibold transition-colors',
                  selected
                    ? 'border-primary bg-primary/5 text-primary-dark'
                    : 'border-border bg-white text-slate-600 hover:border-primary/40'
                )}
              >
                {option.label}
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}