import React from 'react';
import {
  Handshake,
  MessageCircle,
  Calendar,
  Trophy,
  LucideIcon,
} from 'lucide-react';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Grid } from '@/ui/Grid';
import { BenefitCard } from '@/ui/BenefitCard';

interface Benefit {
  icon: LucideIcon;
  title: string;
  description: string;
}

export function WhyJoinTeamSection() {
  const benefits: Benefit[] = [
    {
      icon: Handshake,
      title: 'Shared Strategy',
      description: 'Develop setups together, share telemetry, and coordinate pit strategies for endurance races.',
    },
    {
      icon: MessageCircle,
      title: 'Team Communication',
      description: 'Discord integration, voice chat during races, and dedicated team channels.',
    },
    {
      icon: Calendar,
      title: 'Coordinated Schedule',
      description: 'Team calendars, practice sessions, and organized race attendance.',
    },
    {
      icon: Trophy,
      title: 'Team Championships',
      description: 'Compete in team-based leagues and build your collective reputation.',
    },
  ];

  return (
    <Box mb={12}>
      <Box textAlign="center" mb={8}>
        <Box mb={2}>
          <Heading level={2}>Why Join a Team?</Heading>
        </Box>
        <Text color="text-gray-400">Racing is better when you have teammates to share the journey</Text>
      </Box>

      <Grid cols={4} gap={4}>
        {benefits.map((benefit) => (
          <BenefitCard
            key={benefit.title}
            icon={benefit.icon}
            title={benefit.title}
            description={benefit.description}
          />
        ))}
      </Grid>
    </Box>
  );
}