"use client";

import { ExperienceCard } from "@/components/ExperienceCard";
import type { Experience } from "../types";

const ENABLE_SKILLS_EXPERIENCE = true;

interface SkillsExperienceProps {
  experiences: Experience[];
  onSelectExperience: (experience: Experience) => void;
}

export function SkillsExperience({
  experiences,
  onSelectExperience,
}: SkillsExperienceProps) {
  if (!ENABLE_SKILLS_EXPERIENCE) {
    return null;
  }

  const groupedExperiences = experiences.reduce(
    (acc, exp) => {
      if (!acc[exp.type]) acc[exp.type] = [];
      acc[exp.type].push(exp);
      return acc;
    },
    {} as Record<string, Experience[]>,
  );

  return (
    <section className="w-full max-w-6xl mx-auto space-y-8 px-4 pb-20 sm:space-y-12">
      <div className="text-center space-y-4">
        <h2 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500 sm:text-3xl">
          Skills & Experience
        </h2>
        <p className="text-sm text-gray-400 sm:text-base">
          <span className="text-red-400">
            THIS IS MISSING A LOT OF THINGS, BE AWARE
          </span>{" "}
          - Things I've worked with over the years.
        </p>
      </div>
      <div className="grid grid-cols-1 gap-8 md:grid-cols-2 sm:gap-12">
        {Object.entries(groupedExperiences).map(([type, items]) => (
          <div key={type} className="space-y-6">
            <h3 className="border-l-4 border-blue-500 pl-4 text-lg font-semibold capitalize sm:text-xl">
              {type}
            </h3>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              {items.map((exp, index) => (
                <ExperienceCard
                  key={index}
                  experience={exp}
                  onClick={() => onSelectExperience(exp)}
                />
              ))}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}
