import type { UseFormReturn } from "react-hook-form";
import type { SellerWizardValues } from "./seller.schema";

function ErrorText({ message }: { message?: string }) {
  if (!message) return null;
  return <p className="mt-1 text-xs text-red-600">{message}</p>;
}

export default function StepContact({ form }: { form: UseFormReturn<SellerWizardValues> }) {
  const {
    register,
    formState: { errors },
  } = form;

  return (
    <div className="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-100">
      <h3 className="mb-4 text-sm font-semibold text-gray-900">Contact Person</h3>

      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
        <div>
          <label className="mb-1 block text-xs font-medium text-gray-700">
            Contact Person <span className="text-red-500">*</span>
          </label>
          <input
            {...register("contact_person")}
            className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-[#CC1414] focus:outline-none focus:ring-1 focus:ring-[#CC1414]"
            placeholder="Enter contact person"
          />
          <ErrorText message={errors.contact_person?.message} />
        </div>

        <div>
          <label className="mb-1 block text-xs font-medium text-gray-700">
            Designation <span className="text-red-500">*</span>
          </label>
          <input
            {...register("designation")}
            className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-[#CC1414] focus:outline-none focus:ring-1 focus:ring-[#CC1414]"
            placeholder="Enter designation"
          />
          <ErrorText message={errors.designation?.message} />
        </div>

        <div>
          <label className="mb-1 block text-xs font-medium text-gray-700">
            Mobile <span className="text-red-500">*</span>
          </label>
          <input
            {...register("mobile")}
            className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-[#CC1414] focus:outline-none focus:ring-1 focus:ring-[#CC1414]"
            placeholder="Enter 10-digit mobile"
          />
          <ErrorText message={errors.mobile?.message} />
        </div>

        <div>
          <label className="mb-1 block text-xs font-medium text-gray-700">Alternate Mobile</label>
          <input
            {...register("alternate_mobile")}
            className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-[#CC1414] focus:outline-none focus:ring-1 focus:ring-[#CC1414]"
            placeholder="Enter alternate mobile"
          />
          <ErrorText message={errors.alternate_mobile?.message} />
        </div>

        <div className="md:col-span-2">
          <label className="mb-1 block text-xs font-medium text-gray-700">
            Email <span className="text-red-500">*</span>
          </label>
          <input
            type="email"
            {...register("email")}
            className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-[#CC1414] focus:outline-none focus:ring-1 focus:ring-[#CC1414]"
            placeholder="Enter email address"
          />
          <ErrorText message={errors.email?.message} />
        </div>
      </div>
    </div>
  );
}