// react
import React, { FunctionComponent } from "react";
// application
import { IFooterSettings } from "~/interfaces/footerSettings";

type Props = React.HTMLAttributes<HTMLElement> & {
    settings: Pick<
        IFooterSettings,
        | "contactTitle"
        | "contactSubtitle"
        | "labelPhone"
        | "labelEmail"
        | "labelAddress"
        | "labelHours"
        | "phones"
        | "emails"
        | "addresses"
        | "hours"
    >;
};

type ContactBlockProps = {
    iconClass: string;
    label: string;
    children: React.ReactNode;
};

const ContactBlock: FunctionComponent<ContactBlockProps> = ({ iconClass, label, children }) => (
    <div className="footer-contacts__item">
        <div className="footer-contacts__item-icon" aria-hidden="true">
            <i className={iconClass} />
        </div>
        <div className="footer-contacts__item-body">
            <div className="footer-contacts__item-label">{label}</div>
            <div className="footer-contacts__item-values">{children}</div>
        </div>
    </div>
);

const FooterContacts: FunctionComponent<Props> = ({ settings, className, ...rest }) => {
    const {
        contactTitle,
        contactSubtitle,
        labelPhone,
        labelEmail,
        labelAddress,
        labelHours,
        phones,
        emails,
        addresses,
        hours,
    } = settings;

    return (
        <div className={`footer-contacts ${className || ""}`.trim()} {...rest}>
            <h5 className="footer-contacts__title">{contactTitle}</h5>

            <div className="footer-contacts__text">{contactSubtitle}</div>

            <address className="footer-contacts__contacts">
                <ContactBlock iconClass="fas fa-phone-alt" label={labelPhone}>
                    {phones.map((item, index) => (
                        <div key={index} className="footer-contacts__value">
                            {item}
                        </div>
                    ))}
                </ContactBlock>
                <ContactBlock iconClass="fas fa-envelope" label={labelEmail}>
                    {emails.map((item, index) => (
                        <div key={index} className="footer-contacts__value">
                            {item}
                        </div>
                    ))}
                </ContactBlock>
                <ContactBlock iconClass="fas fa-map-marker-alt" label={labelAddress}>
                    {addresses.map((item, index) => (
                        <div key={index} className="footer-contacts__value">
                            {item}
                        </div>
                    ))}
                </ContactBlock>
                <ContactBlock iconClass="fas fa-clock" label={labelHours}>
                    {hours.map((item, index) => (
                        <div key={index} className="footer-contacts__value">
                            {item}
                        </div>
                    ))}
                </ContactBlock>
            </address>
        </div>
    );
};

export default FooterContacts;