import { templatePageHref } from '@frontend/content/marketing-navigation-dropdown';

type TeamMemberCardProps = {
    badge: string;
    image: string;
    role: string;
    name: string;
    detailTemplatePage: string;
    socials: readonly { readonly href: string; readonly iconClass: string; readonly label: string }[];
    headingTag?: 'h2' | 'h3';
};

export function TeamMemberCard({
    badge,
    image,
    role,
    name,
    detailTemplatePage,
    socials,
    headingTag = 'h3',
}: TeamMemberCardProps) {
    const detailHref = templatePageHref(detailTemplatePage);
    const Heading = headingTag;

    return (
        <div className="card-style05">
            <div className="team-img">
                <div className="team-name">{badge}</div>
                <img src={image} alt="" title="" className="rounded" />
                <div className="team-icon">
                    <ul className="social-icon-style1 list-unstyled mb-0">
                        {socials.map((social) => (
                            <li key={social.label}>
                                <a href={social.href} aria-label={social.label} target="_blank" rel="noopener noreferrer">
                                    <i className={social.iconClass}></i>
                                </a>
                            </li>
                        ))}
                    </ul>
                </div>
            </div>
            <div className="card-body p-0 mt-3">
                <span>{role ? `/ ${role} /` : ''}</span>
                <Heading className="mb-0 h5">
                    <a href={detailHref}>{name}</a>
                </Heading>
            </div>
        </div>
    );
}