import { Section } from "@/components/shared/Section";
import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Award, Star, Trophy } from "lucide-react";

const achievements = [
  {
    icon: <Trophy className="h-8 w-8 text-accent" />,
    title: "Chess.com Coach",
    description: "Officialy recognized as a coach",
  },
  {
    icon: <Award className="h-8 w-8 text-accent" />,
    title: "Rapid Rating Peak Rating",
    description: "2209",
  },
  {
    icon: <Star className="h-8 w-8 text-accent" />,
    title: "Peak Blitz Rating",
    description: "2197",
  },
];

export function Achievements() {
  return (
    <Section
      id="achievements"
      title="My Achievements"
      description="A history of dedication, competition, and success in the world of chess. These are the milestones that inform my coaching."
      className="bg-secondary"
    >
      <div className="grid gap-8 md:grid-cols-3">
        {achievements.map((item, index) => (
          <Card key={index} className="flex flex-col items-center text-center p-6 transition-transform hover:-translate-y-2 hover:shadow-lg">
            <div className="mb-4 rounded-full bg-primary/10 p-4">
              {item.icon}
            </div>
            <CardHeader className="p-0">
              <CardTitle className="font-headline text-xl text-primary">{item.title}</CardTitle>
            </CardHeader>
            <CardDescription className="mt-2">{item.description}</CardDescription>
          </Card>
        ))}
      </div>
    </Section>
  );
}