"use client";

import { useState } from "react";
import { projects, Project } from "@/data/projects";

const categoryColors = {
  security: "bg-[#E0C9B8] hover:border-[#5D5D5D]",
  development: "bg-[#B8C5CE] hover:border-[#5D5D5D]",
  art: "bg-[#E0C9CC] hover:border-[#5D5D5D]",
  other: "bg-[#E8DCC8] hover:border-[#5D5D5D]",
};

const categoryHoverColors = {
  security: "hover:text-[#C9A88E]",
  development: "hover:text-[#9BAAB5]",
  art: "hover:text-[#C9A8AB]",
  other: "hover:text-[#DDD0BB]",
};

export default function ProjectsSection() {
  const [isExpanded, setIsExpanded] = useState(false);

  const featuredProjects = projects.filter((project) => project.featured);
  const additionalProjects = projects.filter((project) => !project.featured);

  return (
    <section
      id="projects"
      className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md p-8 shadow-brutal"
    >
      <h2 className="text-2xl font-bold text-[#3D3D3D] mb-6 text-center uppercase">
        Featured Projects
      </h2>

      <div className="grid md:grid-cols-2 gap-6 mb-6">
        {featuredProjects.map((project) => (
          <ProjectCard key={project.id} project={project} />
        ))}
      </div>

      <div
        className={`overflow-hidden transition-all duration-500 ease-in-out ${
          isExpanded ? "max-h-[1000px] opacity-100" : "max-h-0 opacity-0"
        }`}
      >
        <div className="grid md:grid-cols-2 gap-6">
          {additionalProjects.map((project) => (
            <ProjectCard key={project.id} project={project} />
          ))}
        </div>
      </div>

      {additionalProjects.length > 0 && (
        <div className="text-center mt-6">
          <button
            onClick={() => setIsExpanded(!isExpanded)}
            className="bg-[#3D3D3D] text-white px-6 py-3 font-bold border-2 border-[#3D3D3D] hover:bg-[#FEFDFB] hover:text-[#3D3D3D] transition-colors uppercase rounded-sm"
          >
            {isExpanded ? "Show Less" : "Read More"}
          </button>
        </div>
      )}
    </section>
  );
}

function ProjectCard({ project }: { project: Project }) {
  const colorClass = categoryColors[project.category];
  const hoverColorClass = categoryHoverColors[project.category];

  return (
    <div
      className={`${colorClass} border-2 border-[#3D3D3D] rounded-sm p-6 transition-colors`}
    >
      <h3 className="text-lg font-bold text-[#3D3D3D] mb-2 uppercase">
        {project.title}
      </h3>
      <p className="text-[#5D5D5D] text-sm mb-3">{project.description}</p>
      {project.link && (
        <a
          href={project.link}
          className={`text-[#3D3D3D] font-bold underline ${hoverColorClass} transition-colors`}
        >
          View Project →
        </a>
      )}
    </div>
  );
}
