import { IconArrowNarrowRight } from '@tabler/icons-react';

interface ProjectCardProps {
    title: string; 
    year: string; 
    stack: string[]; 
    description: string; 
    outcome: string;
}

export default function ProjectCard({ title, year, stack, description, outcome }: ProjectCardProps) {
  return (
    <section className="space-y-2 border-t border-neutral-700 pt-4 flex flex-col mt-5">
        <button className='flex justify-between hover:text-neutral-500 transition-colors items-center w-full text-left cursor-pointer group'>
            <h1 className="text-[24px] font-semibold">{title}</h1>
            <IconArrowNarrowRight className='group-hover:scale-150 transition-transform'/>
        </button>
        <p className="text-md text-neutral-400 text-muted">{year} — {stack.join(' · ')}</p>
        <p className="text-xl">{description}</p>
        <p className="text-md text-neutral-400 text-muted">{outcome}</p>
    </section>
  );
}