export type HomeTeamMember = {
    name: string;
    role: string;
    bio: string;
    photoUrl: string;
    facebook: string | null;
    x: string | null;
    linkedin: string | null;
};

export function HomeTeam({ team }: { team: HomeTeamMember[] }) {
    if (team.length === 0) {
        return null;
    }

    return (
        <>
                <section className="team-section-2 pt-100 md-pt-80 pb-100 md-pb-80">
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-12">
                                <div className="section-title text-center wow fadeInUp" data-wow-delay=".2s">
                                    <span className="sub-title">Our Staff</span>
                                    <h2>Meet Our Expert Hotel Guide</h2>
                                </div>
                            </div>
                        </div>
                        <div className="row">
                            <div className="col-lg-12">
                                <div className="team-wapper">
                                    {team.map((member) => (
                                        <div className="team-item wow fadeInUp" data-wow-delay=".3s" key={member.name}>
                                            <div className="team-content-one">
                                                <h2 className="team-title line-anime">{member.name}</h2>
                                                <p>{member.role}</p>
                                            </div>
                                            <div className="team-image">
                                                <figure className="image-anime">
                                                    <img src={member.photoUrl} alt={member.name} />
                                                </figure>
                                            </div>
                                            <div className="team-content-two">
                                                {member.bio !== '' && <p>{member.bio}</p>}
                                                <ul className="social-icon">
                                                    {member.facebook && (
                                                        <li>
                                                            <a href={member.facebook} aria-label="facebook" target="_blank" rel="noreferrer"><i className="fa-brands fa-facebook-f"></i></a>
                                                        </li>
                                                    )}
                                                    {member.x && (
                                                        <li>
                                                            <a href={member.x} aria-label="twitter" target="_blank" rel="noreferrer"><i className="fa-brands fa-x-twitter"></i></a>
                                                        </li>
                                                    )}
                                                    {member.linkedin && (
                                                        <li>
                                                            <a href={member.linkedin} aria-label="linkedin" target="_blank" rel="noreferrer"><i className="fa-brands fa-linkedin-in"></i></a>
                                                        </li>
                                                    )}
                                                </ul>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
        </>
    );
}