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

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

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

    return (
        <section>
            <div className="mx-auto max-w-container px-4 md:px-8">
                {title && (
                    <div className="mb-12 text-center">
                        <h2 className="font-display text-4xl font-normal text-fg-primary md:text-5xl">
                            {title}
                        </h2>
                        {subtitle && (
                            <p className="mt-4 font-body text-lg text-tertiary">
                                {subtitle}
                            </p>
                        )}
                    </div>
                )}

                {displayMembers.length > 0 ? (
                    <div className="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
                        {displayMembers.map((member) => {
                            const bio = member.bio_markdown?.replace(/[#*\[\]()]/g, '').trim() || '';
                            
                            return (
                                <div key={member.id}>
                                    <div className="aspect-[3/4] w-full mb-6">
                                        <PhotoWithFallback
                                            item={member}
                                            fallbackId={member.id}
                                            className="w-full h-full object-cover"
                                        />
                                    </div>
                                    <h3 className="font-display text-xl font-normal text-fg-primary">
                                        {member.name}
                                    </h3>
                                    <p className="mt-2 font-body text-sm" style={{ color: 'var(--color-text-brand-secondary)' }}>
                                        {member.position}
                                    </p>
                                    {bio && (
                                        <p className="mt-4 font-body text-sm leading-relaxed text-tertiary">
                                            {bio}
                                        </p>
                                    )}
                                </div>
                            );
                        })}
                    </div>
                ) : (
                    <div className="text-center py-12">
                        <p className="font-body text-base text-tertiary">No team members available</p>
                    </div>
                )}
            </div>
        </section>
    );
};

import { registerThemeVariant } from '../../lib/component-registry';
registerThemeVariant('team-grid', 'aman', TeamGrid);
