import { BillingTypo } from "@/types";
import { useTranslations } from "next-intl";
import { TextField } from "@/components/form/text-field";

export function Jeel({ user, register }: BillingTypo) {
    const t = useTranslations();
    return (
        <div className="grid md:grid-cols-2 gap-2">
            <TextField
                label={t("checkout.firstName")}
                placeholder={user?.first_name || t("placeholder.first-name")}

                value={user?.first_name ?? ""}
                registerFor="first_name"
                register={register}

                readOnly={!!user?.first_name}
                required
            />

            <TextField
                label={t("checkout.lastName")}
                placeholder={user?.fourth_name || t("placeholder.last-name")}

                value={user?.fourth_name ?? ""}
                registerFor="last_name"
                register={register}

                readOnly={!!user?.fourth_name}
                required
            />

            <TextField
                label={t("checkout.email")}
                type="email"
                placeholder={user?.email || t("placeholder.email")}

                value={user?.email ?? ""}
                registerFor="email"
                register={register}

                readOnly={!!user?.email}
                required
            />

            <TextField
                label={t("checkout.phone")}
                type="tel"
                
                placeholder={user?.phone || t("placeholder.phone")}

                 value={user?.phone || t("placeholder.phone")}
                    registerFor="phone"
                register={register}

              
                required
            />

            <div className="md:col-span-2">
                <TextField
                    type="number"
                    label={t("checkout.nationalId")}
                    placeholder={user?.national_id_number || t("placeholder.national-id")}
                    className=" max-w-full"

                    value={user?.national_id_number ?? ""}
                    registerFor="national_id"
                    register={register}

                    required
                />
            </div>
        </div>
    )
}