Nav

import type { VariantProps } from 'cva';

import { Slot } from '@/components/slot';
import { cn, cva } from '@/lib/utils/classnames';

const Nav = ({
  ref,
  className,
  ...rest
}: React.ComponentPropsWithRef<'nav'>) => (
  <nav
    ref={ref}
    className={cn('flex flex-col gap-6 p-3', className)}
    {...rest}
  />
);

interface NavGroupProps extends React.ComponentPropsWithRef<'div'> {
  label?: React.ReactNode;
}

const NavGroup = ({
  ref,
  className,
  label,
  children,
  ...rest
}: NavGroupProps) => (
  <div ref={ref} className={cn('flex flex-col gap-1', className)} {...rest}>
    {label && (
      <div className="px-2 pt-1 pb-1 font-medium text-foreground-secondary text-xs uppercase tracking-wider">
        {label}
      </div>
    )}
    {children}
  </div>
);

const navItemStyle = cva({
  base: [
    'group relative flex items-center gap-2.5 rounded-lg px-2.5 py-1.5 font-medium text-foreground-secondary text-sm',
    'transition duration-(--duration-hover) ease-(--ease)',
    'hover:bg-foreground/5 hover:text-foreground',
    'focus-visible:ring-(length:--ring-width) ring-ring focus-visible:outline-none',
    'data-[active]:bg-foreground/8 data-[active]:text-foreground',
    '[&>[data-nav-icon]]:size-4 [&>[data-nav-icon]]:shrink-0',
  ],
  variants: {
    size: {
      sm: 'h-7 text-sm',
      md: 'h-8 text-sm',
      lg: 'h-9 text-base',
    },
  },
  defaultVariants: {
    size: 'md',
  },
});

interface NavItemProps
  extends React.ComponentPropsWithRef<'a'>,
    VariantProps<typeof navItemStyle> {
  asChild?: boolean;
  active?: boolean;
}

const NavItem = ({
  ref,
  className,
  size,
  asChild,
  active,
  ...rest
}: NavItemProps) => {
  const Comp = asChild ? Slot : 'a';
  return (
    <Comp
      ref={ref}
      data-active={active ? '' : undefined}
      className={cn(navItemStyle({ size }), className)}
      {...rest}
    />
  );
};

const NavIcon = ({
  ref,
  className,
  ...rest
}: React.ComponentPropsWithRef<'span'>) => (
  <span
    ref={ref}
    data-nav-icon
    aria-hidden
    className={cn('inline-flex items-center justify-center', className)}
    {...rest}
  />
);

const NavLabel = ({
  ref,
  className,
  ...rest
}: React.ComponentPropsWithRef<'span'>) => (
  <span
    ref={ref}
    className={cn('min-w-0 flex-1 truncate', className)}
    {...rest}
  />
);

const NavTrailing = ({
  ref,
  className,
  ...rest
}: React.ComponentPropsWithRef<'span'>) => (
  <span
    ref={ref}
    className={cn(
      'ml-auto inline-flex shrink-0 items-center gap-1 text-foreground-secondary',
      className
    )}
    {...rest}
  />
);

const CompoundNav = Object.assign(Nav, {
  Group: NavGroup,
  Item: NavItem,
  Icon: NavIcon,
  Label: NavLabel,
  Trailing: NavTrailing,
});

export type { NavGroupProps, NavItemProps };
export { CompoundNav as Nav, navItemStyle };