import { BillingTypo } from "@/types";
import { useTranslations } from "next-intl";

import { TextField } from "@/components/form/text-field";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";

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

                value={user?.my_full_name ?? ""}
                registerFor="name"
                register={register}
                readOnly={!!user?.my_full_name}

                required
            />

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

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

                required
            />

            <div className="md:col-span-2 my-2 space-y-2">
                <Label htmlFor="image">
                    * {t("checkout.image")}
                </Label>
                <Input
                    type="file"
                    {...register("image")}
                    required
                />
            </div>
        </div>
    )
}