import React from 'react';
import { PhotoWithFallback } from '../elements';
import type { TeamMember } from '../../types/api/team-member';

interface TeamGridProps {
    teamMembers?: TeamMember[] | null;
    title?: string;
    subtitle?: string;
    maxMembers?: number;
    backgroundColor?: string;
    className?: string;
}

export const TeamGrid = ({
    teamMembers: membersData,
    title = "",
    subtitle = "",
    maxMembers = 8,
    backgroundColor = "bg-primary",
    className = "",
}: TeamGridProps) => {
    const members = Array.isArray(membersData) ? membersData : [];
    
    const displayMembers = members.slice(0, maxMembers);

    return (
        <section className={`${backgroundColor} py-16 md:py-24 ${className}`}>
            <div className="mx-auto w-full max-w-container px-4 md:px-8">
                {(title || subtitle) && (
                    <div className="mx-auto mb-12 flex w-full max-w-3xl flex-col items-center text-center">
                        {title && (
                            <h2 className="text-display-sm font-semibold text-primary md:text-display-md">
                                {title}
                            </h2>
                        )}
                        {subtitle && (
                            <p className="mt-4 text-lg text-tertiary md:mt-5 md:text-xl">
                                {subtitle}
                            </p>
                        )}
                    </div>
                )}

                {displayMembers.length > 0 ? (
                    <div className="mt-12 md:mt-16">
                        <ul className="grid w-full grid-cols-1 gap-x-8 gap-y-10 sm:grid-cols-2 md:gap-y-12 lg:grid-cols-3 xl:grid-cols-4">
                            {displayMembers.map((member, index) => {
                                const bio = member.bio_markdown?.replace(/[#*\[\]()]/g, '').trim() || '';
                                
                                return (
                                    <li key={member.id || index} className="flex flex-col gap-5 md:gap-6">
                                        <PhotoWithFallback
                                            item={member}
                                            fallbackId={member.id || index}
                                            alt={member.name || 'Team member'}
                                            className="h-78 w-full object-cover md:h-74 rounded-2xl"
                                        />
                                        <div>
                                            <h3 className="text-lg font-semibold text-primary md:text-xl">{member.name}</h3>
                                            <p className="text-md text-brand-secondary md:mt-0.5 md:text-lg">
                                                {member.position}
                                            </p>
                                            {bio && (
                                                <p className="mt-4 text-md text-tertiary leading-relaxed">
                                                    {bio}
                                                </p>
                                            )}
                                        </div>
                                    </li>
                                );
                            })}
                        </ul>
                    </div>
                ) : (
                    <div className="text-center mt-12">
                        <p className="text-gray-500">No team members available</p>
                    </div>
                )}
            </div>
        </section>
    );
};
