import React from "react";
import styles from "./styles.module.scss";
import { AddressFields as AddressFieldsType } from "@/hooks/payment/nmi/useAddressFields";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

interface Props {
    fields: AddressFieldsType;
    errors: Partial<Record<keyof AddressFieldsType, string>>;
    onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;
    countryList: { code: string; name: string }[];
}

export default function AddressFields({ fields, errors, onChange, countryList }: Props) {
    const { translate } = useTranslations(ELocalesPlacement.V1);
    return (
        <div className={styles.formGroup}>
            <div className={styles.formRow}>
                <label htmlFor="country">{translate("payment_modal.address_form.labels.country")}</label>
                <select
                    id="country"
                    name="country"
                    className={`${styles.input} ${errors.country ? styles.invalid : ""}`}
                    value={fields.country}
                    onChange={onChange}
                >
                    <option value="">{translate("payment_modal.address_form.placeholders.country")}</option>
                    {countryList.map(c => (
                        <option key={c.code} value={c.code}>{c.name}</option>
                    ))}
                </select>
                {errors.country && <div className={styles.errorMessage}>{errors.country}</div>}
            </div>
            <div className={styles.formRow}>
                <label htmlFor="address">{translate("payment_modal.address_form.labels.address")}</label>
                <input
                    id="address"
                    name="address"
                    className={`${styles.input} ${errors.address ? styles.invalid : ""}`}
                    value={fields.address}
                    onChange={onChange}
                    placeholder={translate("payment_modal.address_form.placeholders.address")}
                />
                {errors.address && <div className={styles.errorMessage}>{errors.address}</div>}
            </div>
            <div className={styles.formRow}>
                <label htmlFor="zip">{translate("payment_modal.address_form.labels.zip")}</label>
                <input
                    id="zip"
                    name="zip"
                    className={`${styles.input} ${errors.zip ? styles.invalid : ""}`}
                    value={fields.zip}
                    onChange={onChange}
                    placeholder={translate("payment_modal.address_form.placeholders.zip")}
                />
                {errors.zip && <div className={styles.errorMessage}>{errors.zip}</div>}
            </div>
        </div>
    );
}