import { ProjectItem } from "@/data/StaticData";

interface ProjectItemsProps {
  items: ProjectItem[];
  activeIndex: number;
  setActiveIndex: (idx: number) => void;
}

const ProjectItems = ({
  items,
  activeIndex,
  setActiveIndex,
}: ProjectItemsProps) => {
  return (
    <ul className="space-y-8">
      {items.map(({ title }, idx) => {
        const isActive = idx === activeIndex;

        return (
          <li key={title}>
            <button
              onClick={() => setActiveIndex(idx)}
              className={`ml-1 w-full text-left flex items-center gap-4 rounded-md px-2 py-2 transition cursor-pointer ${
                isActive && "bg-[var(--color-2)] md:rounded-r-none"
              }`}
            >
              <span
                className={`inline-block w-3.5 h-3.5 rotate-45 ${
                  isActive
                    ? "bg-[var(--color-8)] shadow-[0_0_10px_rgba(127,17,224,1)]"
                    : "bg-[var(--color-10)]"
                }`}
              />
              <span className="font-mono text-sm sm:text-base">{title}</span>
            </button>
          </li>
        );
      })}
    </ul>
  );
};

export default ProjectItems;