import cn from "@/utils/class-names";
import React from "react";

const AddressDetail = ({ label, value, isFullWidth = false }: { label: string; value: string; isFullWidth?: boolean }) => {
    if (!value) return null;
    return (
        <div className={cn({ "sm:col-span-2": isFullWidth })}>
            <div className="text-sm text-slate-500">{label}</div>
            <div className="text-slate-800 font-semibold break-words whitespace-pre-line">{value}</div>
        </div>
    );
};

const Address = ({ address, customerDetails, orderTrsponse = false, title = "" }: { address?: any; customerDetails?: any; orderTrsponse?: boolean; title?: string }) => {
    const hasCustomerDetails = customerDetails && Object.keys(customerDetails).length > 0;

    return (
        <div
            className={cn("border border-slate-200 bg-slate-50/70 rounded-xl", {
                "mt-6 p-6": !orderTrsponse,
                "my-4 p-4": orderTrsponse,
            })}
        >
            <h2
                className={cn("font-bold capitalize text-slate-900", {
                    "text-xl mb-4": !orderTrsponse,
                    "text-lg mb-3": orderTrsponse,
                })}
            >
                {title}
            </h2>
            <div className={cn("grid grid-cols-1 sm:grid-cols-2 gap-4", {
                "text-base": !orderTrsponse,
                "text-sm": orderTrsponse,
            })}>
                <AddressDetail label="Name" value={address?.name || "-"} isFullWidth />

                {hasCustomerDetails && (
                    <AddressDetail label="Email" value={customerDetails?.guestEmail || customerDetails?.email || "-"} isFullWidth />
                )}

                <AddressDetail label="Address 1" value={address?.address1 || "-"} isFullWidth />

                <AddressDetail label="Address 2" value={address?.address2} isFullWidth />

                <AddressDetail label="Phone Number" value={'+971 ' + (address?.phoneNumber || "-")} />

                <AddressDetail label="Landline Number" value={address?.landlineNumber} />

                <AddressDetail label="City" value={address?.city || "-"} />

                <AddressDetail label="State" value={address?.state || "-"} />

                <AddressDetail label="Country" value={address?.country || "-"} />
            </div>
        </div>
    );
};

export default Address;