import Link from 'next/link'

type ProjectCardProps = {
  title: string
  description: string
  stack: string[]
  href?: string
}

export default function ProjectCard({ title, description, stack, href }: ProjectCardProps) {
  return (
    <div className="group flex h-full flex-col rounded-lg border border-zinc-200 bg-zinc-50 p-6 shadow-sm shadow-black/5 transition-all hover:border-zinc-300 hover:shadow-md hover:shadow-black/10 dark:border-zinc-800 dark:bg-zinc-900 dark:shadow-black/40 dark:hover:border-zinc-600 dark:hover:shadow-black/50">
      <h3 className="font-medium text-zinc-900 dark:text-white">{title}</h3>
      <p className="mt-2 flex-1 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">{description}</p>

      <ul className="mt-5 flex flex-wrap gap-2">
        {stack.map((tech) => (
          <li
            key={tech}
            className="rounded-sm bg-zinc-200 px-2.5 py-1 font-mono text-xs text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300"
          >
            {tech}
          </li>
        ))}
      </ul>

      {href && (
        <Link
          href={href}
          className="mt-6 inline-flex items-center gap-1.5 text-sm text-zinc-500 transition-colors hover:text-zinc-900 dark:hover:text-white"
        >
          View project
          <span className="transition-transform group-hover:translate-x-0.5">&rarr;</span>
        </Link>
      )}
    </div>
  )
}