type Props = {
  activeIndex: number
}

export function NavIndicator({ activeIndex }: Props) {
  const itemHeight = 48
  const itemOffset = 14
  const position = activeIndex * itemHeight + itemOffset

  return (
    <div className="relative mr-[20px] h-full w-0 md:mr-2">
      <div className="absolute inset-0 w-[1px] bg-border" />
      <div
        className="pointer-events-none absolute left-[-1px] z-10 hidden h-5 w-[3px] bg-brand duration-150 ease-in-out md:block"
        style={{
          transform: `translateY(${position}px)`,
        }}
      />
    </div>
  )
}