import React from "react";

interface CustomerInfoFormProps {
  mobileNumber: string;
  setMobileNumber: (val: string) => void;
  customerName: string;
  setCustomerName: (val: string) => void;
  customerEmail: string;
  setCustomerEmail: (val: string) => void;
  errors: {
    mobile_number?: string;
    customer_name?: string;
    customer_email?: string;
  };
}

export default function CustomerInfoForm({
  mobileNumber,
  setMobileNumber,
  customerName,
  setCustomerName,
  customerEmail,
  setCustomerEmail,
  errors,
}: CustomerInfoFormProps) {
  return (
    <div className="bg-white dark:bg-zinc-900 border border-slate-100 dark:border-zinc-800/80 rounded-2xl p-5 shadow-xs space-y-3">
      <h2 className="text-sm font-extrabold text-slate-900 dark:text-zinc-100 uppercase tracking-wide border-b border-slate-100 dark:border-zinc-800 pb-2">
        1. Customer Info
      </h2>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
        <div className="space-y-1">
          <label className="text-[10px] font-bold uppercase tracking-wider text-slate-400 block">
            Mobile Number *
          </label>
          <input
            type="tel"
            suppressHydrationWarning
            placeholder="e.g. 01712345678"
            value={mobileNumber}
            onChange={(e) => setMobileNumber(e.target.value)}
            className={`w-full h-9 px-3.5 rounded-xl border bg-white dark:bg-zinc-950 text-xs font-semibold focus:outline-none ${errors.mobile_number
              ? "border-red-500 focus:border-red-500"
              : "border-slate-200 dark:border-zinc-800 focus:border-brand-accent"
              }`}
          />
          {errors.mobile_number && (
            <p className="text-red-500 text-[10px] font-bold mt-1 pl-1">
              {errors.mobile_number}
            </p>
          )}
        </div>
        <div className="space-y-1">
          <label className="text-[10px] font-bold uppercase tracking-wider text-slate-400 block">
            Full Name *
          </label>
          <input
            type="text"
            suppressHydrationWarning
            placeholder="Your Name"
            value={customerName}
            onChange={(e) => setCustomerName(e.target.value)}
            className={`w-full h-9 px-3.5 rounded-xl border bg-white dark:bg-zinc-950 text-xs font-semibold focus:outline-none ${errors.customer_name
              ? "border-red-500 focus:border-red-500"
              : "border-slate-200 dark:border-zinc-800 focus:border-brand-accent"
              }`}
          />
          {errors.customer_name && (
            <p className="text-red-500 text-[10px] font-bold mt-1 pl-1">
              {errors.customer_name}
            </p>
          )}
        </div>
        <div className="space-y-1 md:col-span-2">
          <label className="text-[10px] font-bold uppercase tracking-wider text-slate-400 block">
            Email Address (Optional)
          </label>
          <input
            type="email"
            placeholder="you@example.com"
            value={customerEmail}
            onChange={(e) => setCustomerEmail(e.target.value)}
            className={`w-full h-9 px-3.5 rounded-xl border bg-white dark:bg-zinc-950 text-xs font-semibold focus:outline-none ${errors.customer_email
              ? "border-red-500 focus:border-red-500"
              : "border-slate-200 dark:border-zinc-800 focus:border-brand-accent"
              }`}
          />
          {errors.customer_email && (
            <p className="text-red-500 text-[10px] font-bold mt-1 pl-1">
              {errors.customer_email}
            </p>
          )}
        </div>
      </div>
    </div>
  );
}