---
import { Image } from "astro:assets";
import TagBadge from "./TagBadge.astro";
import { ExternalLink, Eye } from "@lucide/astro";
import type { CollectionEntry } from "astro:content";

interface Props {
  project: CollectionEntry<"projects">;
}

const { project } = Astro.props;
---

<article
  class="card bg-base-100 shadow-xl border border-base-200 rounded-lg hover:shadow-2xl transition-shadow"
>
  <figure class="aspect-video">
    <Image
      src={project.data.image}
      alt={project.data.title}
      class="w-full h-full object-cover"
      width={600}
      height={400}
    />
  </figure>
  <div class="card-body">
    <h2 class="card-title hover:text-primary transition-colors">
      <a href={`/projects/${project.id}`}>{project.data.title}</a>
    </h2>
    <p class="text-base-content/80">{project.data.description}</p>
    {
      project.data.tags && project.data.tags.length > 0 && (
        <div class="flex flex-wrap gap-2 mt-2">
          {project.data.tags.map((tag) => (
            <TagBadge tag={tag} />
          ))}
        </div>
      )
    }
    <div class="card-actions justify-end mt-4 gap-2">
      {
        project.data.demoLink && (
          <a
            href={project.data.demoLink}
            target="_blank"
            rel="noopener noreferrer"
            class="btn btn-sm btn-ghost gap-1"
          >
            <ExternalLink class="size-4" />
            Demo
          </a>
        )
      }
      {
        project.data.url && (
          <a
            href={project.data.url}
            target="_blank"
            rel="noopener noreferrer"
            class="btn btn-sm btn-ghost gap-1"
          >
            <ExternalLink class="size-4" />
            Website
          </a>
        )
      }
      {
        project.data.sourceLink && (
          <a
            href={project.data.sourceLink}
            target="_blank"
            rel="noopener noreferrer"
            class="btn btn-sm btn-ghost gap-1"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="18"
              height="18"
              viewBox="0 0 32 32"
              fill="currentColor"
            >
              <path d="M16,2.345c7.735,0,14,6.265,14,14-.002,6.015-3.839,11.359-9.537,13.282-.7,.14-.963-.298-.963-.665,0-.473,.018-1.978,.018-3.85,0-1.312-.437-2.152-.945-2.59,3.115-.35,6.388-1.54,6.388-6.912,0-1.54-.543-2.783-1.435-3.762,.14-.35,.63-1.785-.14-3.71,0,0-1.173-.385-3.85,1.435-1.12-.315-2.31-.472-3.5-.472s-2.38,.157-3.5,.472c-2.677-1.802-3.85-1.435-3.85-1.435-.77,1.925-.28,3.36-.14,3.71-.892,.98-1.435,2.24-1.435,3.762,0,5.355,3.255,6.563,6.37,6.913-.403,.35-.77,.963-.893,1.872-.805,.368-2.818,.963-4.077-1.155-.263-.42-1.05-1.452-2.152-1.435-1.173,.018-.472,.665,.017,.927,.595,.332,1.277,1.575,1.435,1.978,.28,.787,1.19,2.293,4.707,1.645,0,1.173,.018,2.275,.018,2.607,0,.368-.263,.787-.963,.665-5.719-1.904-9.576-7.255-9.573-13.283,0-7.735,6.265-14,14-14Z" />
            </svg>
            Source
          </a>
        )
      }
      <div class="tooltip" data-tip="View project details">
        <a href={`/projects/${project.id}`} class="btn btn-sm btn-primary">
          <Eye class="size-4" />
        </a>
      </div>
    </div>
  </div>
</article>
