---
import type { Project } from '@globalInterfaces';

interface Props {
	project: Project
}

const { project } = Astro.props
---

<a
  href={project.demo_link}
  target="_blank"
  rel="noopener noreferrer"
  class="block p-6 transition-all duration-300 ease-out bg-white border border-dashed rounded-2xl border-neutral-300 dark:border-neutral-600 dark:bg-neutral-900 group hover:border-solid hover:-translate-y-1 hover:shadow-xl"
>
  <img
    src={project.image}
    alt={project.alt_text || `Скриншот проекта ${project.title}`}
    class="object-cover w-full mb-4 rounded-lg aspect-video"
    loading="lazy"
    width="400"
    height="225"
  />
  <h3 class="text-lg font-bold text-neutral-900 dark:text-neutral-100">{project.title}</h3>
  <p class="mt-1 text-sm text-neutral-600 dark:text-neutral-400">{project.description}</p>
  {project.stack.length > 0 && (
    <div class="mt-2 flex flex-wrap gap-1">
      {project.stack.map(tech => (
        <span class="text-xs px-2 py-1 bg-neutral-100 dark:bg-neutral-800 rounded-full">{tech}</span>
      ))}
    </div>
  )}
</a>