---
import Tag from '../ui/Tag.astro';

export interface Props {
  year: string;
  role: string;
  company: string;
  description: string;
  tech: string[];
  slug?: string;
}

const { year, role, company, description, tech, slug } = Astro.props;
---

{slug ? (
  <a href={`/work/${slug}`} class="block">
    <div
      class="group grid lg:grid-cols-12 gap-4 sm:gap-8 py-6 sm:py-8 border-b border-border/50 hover:border-border transition-colors duration-500 cursor-pointer"
    >
      <div class="lg:col-span-2">
        <div class="text-xl sm:text-2xl font-light text-muted-foreground group-hover:text-foreground transition-colors duration-500">
          {year}
        </div>
      </div>

      <div class="lg:col-span-6 space-y-3">
        <div>
          <h3 class="text-lg sm:text-xl font-medium">{role}</h3>
          <div class="text-muted-foreground">{company}</div>
        </div>
        <p class="text-muted-foreground leading-relaxed max-w-lg">{description}</p>
      </div>

      <div class="lg:col-span-4 flex flex-wrap gap-2 lg:justify-end mt-2 lg:mt-0">
        {tech.map((technology) => (
          <Tag text={technology} variant="tech" />
        ))}
      </div>
    </div>
  </a>
) : (
  <div
    class="group grid lg:grid-cols-12 gap-4 sm:gap-8 py-6 sm:py-8 border-b border-border/50 hover:border-border transition-colors duration-500"
  >
    <div class="lg:col-span-2">
      <div class="text-xl sm:text-2xl font-light text-muted-foreground group-hover:text-foreground transition-colors duration-500">
        {year}
      </div>
    </div>

    <div class="lg:col-span-6 space-y-3">
      <div>
        <h3 class="text-lg sm:text-xl font-medium">{role}</h3>
        <div class="text-muted-foreground">{company}</div>
      </div>
      <p class="text-muted-foreground leading-relaxed max-w-lg">{description}</p>
    </div>

    <div class="lg:col-span-4 flex flex-wrap gap-2 lg:justify-end mt-2 lg:mt-0">
      {tech.map((technology) => (
        <Tag text={technology} variant="tech" />
      ))}
    </div>
  </div>
)}