"use client";

interface Step2Props {
  data: {
    alzheimerType: string;
    progress: number;
    allergies: string;
    otherIllnesses: string;
  };
  errors: Record<string, string>;
  onChange: (field: string, value: string | number) => void;
}

const alzheimerTypes = [
  "Early Stage Alzheimer's",
  "Middle Stage Alzheimer's",
  "Late Stage Alzheimer's",
  "Mild Cognitive Impairment",
  "Other Dementia",
];

export default function Step2Medical({ data, errors, onChange }: Step2Props) {
  return (
    <div className="space-y-6">
      <div>
        <label className="mb-1.5 block text-sm font-medium text-zinc-300">
          Type of Alzheimer&apos;s <span className="text-red-400">*</span>
        </label>
        <select
          value={data.alzheimerType}
          onChange={(e) => onChange("alzheimerType", e.target.value)}
          className={`w-full rounded-lg border bg-zinc-900 px-3.5 py-2.5 text-sm text-zinc-100 outline-none transition-colors focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 ${
            errors.alzheimerType ? "border-red-500" : "border-zinc-800"
          }`}
        >
          <option value="" disabled className="bg-zinc-900 text-zinc-500">
            Select type...
          </option>
          {alzheimerTypes.map((type) => (
            <option key={type} value={type} className="bg-zinc-900">
              {type}
            </option>
          ))}
        </select>
        {errors.alzheimerType && (
          <p className="mt-1 text-xs text-red-400">{errors.alzheimerType}</p>
        )}
      </div>

      <div>
        <div className="mb-2 flex items-center justify-between">
          <label className="text-sm font-medium text-zinc-300">
            Disease Progression <span className="text-red-400">*</span>
          </label>
          <span className="rounded-md bg-zinc-800 px-2 py-0.5 text-xs font-semibold text-indigo-400">
            {data.progress}%
          </span>
        </div>
        <input
          type="range"
          min={1}
          max={100}
          value={data.progress}
          onChange={(e) => onChange("progress", Number(e.target.value))}
          className="h-2 w-full cursor-pointer appearance-none rounded-lg bg-zinc-800 accent-indigo-600"
        />
        <div className="mt-1 flex justify-between text-xs text-zinc-500">
          <span>Early (1%)</span>
          <span>Advanced (100%)</span>
        </div>
        {errors.progress && (
          <p className="mt-1 text-xs text-red-400">{errors.progress}</p>
        )}
      </div>

      <div>
        <label className="mb-1.5 block text-sm font-medium text-zinc-300">
          Other Illnesses
        </label>
        <textarea
          value={data.otherIllnesses}
          onChange={(e) => onChange("otherIllnesses", e.target.value)}
          rows={3}
          placeholder="List any other illnesses or medical conditions..."
          className="w-full rounded-lg border border-zinc-800 bg-zinc-900 px-3.5 py-2.5 text-sm text-zinc-100 outline-none transition-colors placeholder:text-zinc-600 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
        />
      </div>

      <div>
        <label className="mb-1.5 block text-sm font-medium text-zinc-300">
          Allergies
        </label>
        <textarea
          value={data.allergies}
          onChange={(e) => onChange("allergies", e.target.value)}
          rows={3}
          placeholder="List known allergies (medications, food, etc.)..."
          className="w-full rounded-lg border border-zinc-800 bg-zinc-900 px-3.5 py-2.5 text-sm text-zinc-100 outline-none transition-colors placeholder:text-zinc-600 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
        />
      </div>
    </div>
  );
}