"use client";

interface Step1Props {
  data: {
    name: string;
    firstName: string;
    phone: string;
    dob: string;
    gender: "MALE" | "FEMALE" | "OTHER";
  };
  errors: Record<string, string>;
  onChange: (field: string, value: string) => void;
}

export default function Step1Personal({ data, errors, onChange }: Step1Props) {
  return (
    <div className="space-y-5">
      <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
        <div>
          <label className="mb-1.5 block text-sm font-medium text-zinc-300">
            Name <span className="text-red-400">*</span>
          </label>
          <input
            type="text"
            value={data.name}
            onChange={(e) => onChange("name", e.target.value)}
            placeholder="e.g. Benali"
            className={`w-full rounded-lg border 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 ${
              errors.name ? "border-red-500" : "border-zinc-800"
            }`}
          />
          {errors.name && (
            <p className="mt-1 text-xs text-red-400">{errors.name}</p>
          )}
        </div>

        <div>
          <label className="mb-1.5 block text-sm font-medium text-zinc-300">
            First Name <span className="text-red-400">*</span>
          </label>
          <input
            type="text"
            value={data.firstName}
            onChange={(e) => onChange("firstName", e.target.value)}
            placeholder="e.g. Ahmed"
            className={`w-full rounded-lg border 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 ${
              errors.firstName ? "border-red-500" : "border-zinc-800"
            }`}
          />
          {errors.firstName && (
            <p className="mt-1 text-xs text-red-400">{errors.firstName}</p>
          )}
        </div>
      </div>

      <div>
        <label className="mb-1.5 block text-sm font-medium text-zinc-300">
          Phone Number
        </label>
        <input
          type="tel"
          value={data.phone}
          onChange={(e) => onChange("phone", e.target.value)}
          placeholder="e.g. 0555123456"
          className={`w-full rounded-lg border 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 ${
            errors.phone ? "border-red-500" : "border-zinc-800"
          }`}
        />
        {errors.phone && (
          <p className="mt-1 text-xs text-red-400">{errors.phone}</p>
        )}
      </div>

      <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
        <div>
          <label className="mb-1.5 block text-sm font-medium text-zinc-300">
            Date of Birth <span className="text-red-400">*</span>
          </label>
          <input
            type="date"
            value={data.dob}
            onChange={(e) => onChange("dob", 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.dob ? "border-red-500" : "border-zinc-800"
            }`}
          />
          {errors.dob && (
            <p className="mt-1 text-xs text-red-400">{errors.dob}</p>
          )}
        </div>

        <div>
          <label className="mb-2.5 block text-sm font-medium text-zinc-300">
            Gender <span className="text-red-400">*</span>
          </label>
          <div className="flex items-center gap-4">
            {(["MALE", "FEMALE", "OTHER"] as const).map((g) => (
              <label
                key={g}
                className={`inline-flex cursor-pointer items-center gap-2 rounded-lg border px-3 py-2 text-sm transition-colors ${
                  data.gender === g
                    ? "border-indigo-500 bg-indigo-500/10 text-indigo-300"
                    : "border-zinc-800 bg-zinc-900 text-zinc-400 hover:border-zinc-700"
                }`}
              >
                <input
                  type="radio"
                  name="gender"
                  value={g}
                  checked={data.gender === g}
                  onChange={() => onChange("gender", g)}
                  className="hidden"
                />
                <span className="capitalize">{g.toLowerCase()}</span>
              </label>
            ))}
          </div>
          {errors.gender && (
            <p className="mt-1 text-xs text-red-400">{errors.gender}</p>
          )}
        </div>
      </div>
    </div>
  );
}