"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { BitAura } from "@/src/components/bits/BitAura";
import type { CareerStation } from "@/src/content/types";

/**
 * CareerLine: the path so far as a line of light that draws itself, one station
 * after another. Made for a dark surface.
 */
export const CareerLine: React.FC<{ stations: readonly CareerStation[] }> = ({
  stations,
}) => (
  <ol className="relative m-0 list-none p-0">
    <BitAura
      source="left"
      tone="dark"
      radius={0}
      density={0.5}
      className="absolute bottom-2 left-[5px] top-2 w-px md:left-[7px]"
    >
      <motion.span
        className="block h-full w-px origin-top bg-indigo-100"
        initial={{ scaleY: 0 }}
        whileInView={{ scaleY: 1 }}
        viewport={{ once: true, margin: "-15%" }}
        transition={{ duration: 1.4, ease: "easeOut" }}
        aria-hidden="true"
      />
    </BitAura>
    {stations.map((station, index) => (
      <motion.li
        key={station.years}
        className="relative grid grid-cols-1 gap-1 pb-10 pl-8 last:pb-0 md:grid-cols-12 md:gap-8 md:pl-12"
        initial={{ opacity: 0, x: -8 }}
        whileInView={{ opacity: 1, x: 0 }}
        viewport={{ once: true, margin: "-15%" }}
        transition={{ duration: 0.4, delay: 0.15 + index * 0.18 }}
      >
        <span
          className={`absolute left-0 top-1.5 h-[11px] w-[11px] rounded-full border-2 border-indigo-100 md:h-[15px] md:w-[15px] ${
            index === stations.length - 1
              ? "bit-node-live bg-white"
              : "bg-slate-900"
          }`}
          aria-hidden="true"
        />
        <span className="font-mono text-sm font-bold uppercase tracking-[0.14em] text-indigo-200 md:col-span-3 md:pt-1.5 md:text-base">
          {station.years}
        </span>
        <span className="md:col-span-9">
          <span className="block font-sans text-xl font-bold tracking-tight text-white md:text-3xl">
            {station.role}
          </span>
          <span className="mt-1 block font-sans text-base text-slate-400 md:text-lg">
            {station.place}
          </span>
        </span>
      </motion.li>
    ))}
  </ol>
);