import { ProjectListProps } from "../types";

export default function ProjectList({
    projects,
    handleProjectClick,
}: {
    projects: ProjectListProps[];
    handleProjectClick: (project: string) => void;
}) {
    const projectList = projects.map((project) => (
        <button
            key={project.id}
            className={
                (project.selected
                    ? "text-shadow-[4px_3px_0_var(--color-cherry-shrimp)]"
                    : "") +
                " hover:[text-decoration-line:underline_overline] hover:decoration-ashy-shrimp cursor-[unset]"
            }
            onClick={() => handleProjectClick(project.id)}
        >
            {project.name}
        </button>
    ));
    return (
        <section className="flex gap-[20px] justify-evenly py-[10px] text-tangerine-dream-shrimp text-2xl">
            {projectList}
        </section>
    );
}

//todo nice to have: border-image on hover would be cool