import { Container } from '@/src/components/container';
import { SectionHeading } from '@/src/components/section-heading';
import { teamSectionData } from '@/data/team-section/v1';
import { TeamCard } from '@/src/components/cards/team/v1';

export function TeamSection() {
  const { sectionHeading, cards } = teamSectionData;

  return (
    <section className="section-padding-primary bg-accent-100 dark:bg-accent-700">
      <Container>
        {/* Section Heading */}
        <div className=" mb-10 max-w-[880px] md:mb-[3.75rem]">
          <SectionHeading {...sectionHeading} />
        </div>

        {/* Cards Grid */}
        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
          {cards.map((card, index) => (
            <TeamCard key={index} {...card} />
          ))}
        </div>
      </Container>
    </section>
  );
}