import Link from 'next/link';
import { IconArrowNarrowRight, IconExternalLink } from '@tabler/icons-react';
import { colors } from '@/constants';

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

export default function ProjectCard({ slug, title, year, stack, description, liveUrl }: ProjectCardProps) {
  return (
    <section className="space-y-2 border-t border-neutral-700 pt-4 flex flex-col mt-5">
        <Link href={`/projects/${slug}`} 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'/>
        </Link>
        <p className="text-md text-neutral-400 text-muted">{year} — {stack.join(' · ')}</p>
        <p className="text-xl">{description}</p>
        <a
          href={liveUrl}
          target="_blank"
          rel="noreferrer"
          className="mt-2 inline-flex w-fit items-center gap-2 rounded-lg border border-neutral-700 px-4 py-2 text-[15px] font-medium transition-colors hover:border-neutral-500"
          style={{ color: colors.accent }}
        >
          Live Demo
          <IconExternalLink size={18} />
        </a>
    </section>
  );
}