---
import { Icon } from "astro-icon/components";
import { type Project } from "../consts";
import Carousel from "./Carousel.astro";
import ThreeColumnSection from "./ThreeColumnSection.astro";

interface Props {
  projects: Project[];
}

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

{
  projects.map((project) => (
    <ThreeColumnSection maxWidth="8xl" py="py-8">
      {/* ---------- LEFT: Project details ---------- */}
      <div slot="left" class="max-w-xs justify-self-center lg:justify-self-end">
        <article class="space-y-4">
          {/* Title + optional company */}
          <h3 class="text-2xl font-semibold text-slate-900 dark:text-slate-100">
            {project.title}

            {/* Duration */}
            <p class="text-sm text-slate-500 dark:text-slate-400 flex items-center mt-1">
              <Icon name="mdi:calendar" class="mr-2" />
              {project.duration}
            </p>
          </h3>

          {/* Description */}
          <p class="text-base text-slate-800 dark:text-slate-200">
            {project.description}
          </p>

          {/* Tech stack */}
          <div class="flex flex-wrap gap-2 mt-2">
            {project.tech_stack.map((tech) => (
              <span class="px-2 py-0.5 text-xs font-medium bg-slate-200 dark:bg-slate-600 text-slate-800 dark:text-slate-100 rounded">
                {tech}
              </span>
            ))}
          </div>

          {/* Deliverables (optional) */}
          {project.deliverables?.length && (
            <ul class="list-disc list-inside text-sm text-slate-700 dark:text-slate-300 mt-3">
              {project.deliverables.map((item) => (
                <li class="mb-1">{item}</li>
              ))}
            </ul>
          )}

          {/* Links */}
          <div class="flex space-x-4 mt-4">
            {project.live_url && (
              <a
                href={project.live_url}
                target="_blank"
                rel="noopener noreferrer"
                class="inline-flex items-center gap-1.5 rounded px-3 py-1.5 text-sm font-medium
                           transition-colors duration-150
                           bg-slate-100 hover:bg-slate-200 focus-visible:outline focus-visible:outline-2
                           focus-visible:outline-offset-2 focus-visible:outline-slate-500
                           dark:bg-slate-800 dark:hover:bg-slate-700 dark:focus-visible:outline-slate-400"
              >
                <Icon name="mdi:aspect-ratio" /> Live
              </a>
            )}
            {project.repo_url && (
              <a
                href={project.repo_url}
                target="_blank"
                rel="noopener noreferrer"
                class="inline-flex items-center gap-1.5 rounded px-3 py-1.5 text-sm font-medium
                           transition-colors duration-150
                           bg-slate-100 hover:bg-slate-200 focus-visible:outline focus-visible:outline-2
                           focus-visible:outline-offset-2 focus-visible:outline-slate-500
                           dark:bg-slate-800 dark:hover:bg-slate-700 dark:focus-visible:outline-slate-400"
              >
                <Icon name="mdi:github" /> Repo
              </a>
            )}
          </div>
        </article>
      </div>

      {/* ---------- CENTER: Carousel ---------- */}
      <div slot="center" class="w-full">
        <div class="rounded-lg overflow-hidden shadow-lg">
          <Carousel images={project.images} />
        </div>
      </div>

      {/* ---------- RIGHT: Empty for now ---------- */}
      <div slot="right" class="hidden lg:block" />
    </ThreeColumnSection>
  ))
}