Shortcuts

import {
  AirplaneTiltIcon,
  AlienIcon,
  ArrowUpRightIcon,
  FootprintsIcon,
  PlanetIcon,
  RadioactiveIcon,
  RocketLaunchIcon,
} from "@phosphor-icons/react/dist/ssr"

import { Grid } from "@/components/editorial/grid"
import {
  Section,
  SectionContent,
} from "@/components/editorial/section"
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"

const ACTIONS = [
  {
    name: "Request a planet visit",
    description:
      "Pick the planet and the window. Flight dynamics replies with a launch date and the delta-v it costs.",
    href: "#",
    icon: PlanetIcon,
  },
  {
    name: "Submit an alien sighting report",
    description:
      "Time, bearing and what you saw. Anything brighter than Venus goes to the duty astronomer.",
    href: "#",
    icon: AlienIcon,
  },
  {
    name: "Moonwalking training",
    description:
      "Book the pool. Six hours underwater for every hour you will spend on the surface.",
    href: "#",
    icon: FootprintsIcon,
  },
  {
    name: "Launch pass",
    description:
      "Your badge for the pad, the firing room and the crawlerway, with the next closure dates.",
    href: "#",
    icon: RocketLaunchIcon,
  },
  {
    name: "Radiation dose",
    description:
      "Your dosimeter readings for the year, and how much of the career limit is left.",
    href: "#",
    icon: RadioactiveIcon,
  },
  {
    name: "Zero-g flight",
    description:
      "Seats on the next parabolic flight: thirty arcs, twenty-five seconds of weightlessness each.",
    href: "#",
    icon: AirplaneTiltIcon,
  },
] as const

export default function Shortcuts() {
  return (
    <Section>
      <SectionContent className="@container/shortcuts">
        <Grid
          render={<ul role="list" />}
          cols={1}
          gap="sm"
          className="@2xl/shortcuts:grid-cols-2"
        >
          {ACTIONS.map((action) => (
            <li key={action.name}>
              <Item variant="outline" render={<a href={action.href} />}>
                <ItemMedia variant="icon">
                  <action.icon weight="light" aria-hidden="true" />
                </ItemMedia>
                <ItemContent>
                  <ItemTitle>{action.name}</ItemTitle>
                  <ItemDescription className="line-clamp-none">
                    {action.description}
                  </ItemDescription>
                </ItemContent>
                <ItemActions>
                  <ArrowUpRightIcon weight="light" aria-hidden="true" />
                </ItemActions>
              </Item>
            </li>
          ))}
        </Grid>
      </SectionContent>
    </Section>
  )
}