// AlignUI Breadcrumb v0.0.0

import * as React from 'react';
import { Slot } from '@radix-ui/react-slot';
import { cn } from '@/utils/cn';
import { PolymorphicComponentProps } from '@/utils/polymorphic';

const BREADCRUMB_ROOT_NAME = 'BreadcrumbRoot';
const BREADCRUMB_ITEM_NAME = 'BreadcrumbItem';
const BREADCRUMB_ICON_NAME = 'BreadcrumbIcon';
const BREADCRUMB_ARROW_NAME = 'BreadcrumbArrow';

type BreadcrumbRootProps = React.HTMLAttributes<HTMLDivElement> & {
  asChild?: boolean;
};

function BreadcrumbRoot({
  asChild,
  children,
  className,
  ...rest
}: BreadcrumbRootProps) {
  const Component = asChild ? Slot : 'div';

  return (
    <Component className={cn('flex flex-wrap gap-1.5', className)} {...rest}>
      {children}
    </Component>
  );
}
BreadcrumbRoot.displayName = BREADCRUMB_ROOT_NAME;

type BreadcrumbItemProps = React.HTMLAttributes<HTMLDivElement> & {
  asChild?: boolean;
  active?: boolean;
};

const BreadcrumbItem = React.forwardRef<HTMLDivElement, BreadcrumbItemProps>(
  ({ asChild, children, className, active, ...rest }, forwardedRef) => {
    const Component = asChild ? Slot : 'div';

    return (
      <Component
        ref={forwardedRef}
        className={cn(
          // base
          'flex items-center gap-1.5 transition-colors duration-200 ease-out',
          'text-label-sm text-text-sub-600',
          {
            // not active
            'underline decoration-transparent': !active,
            // hover
            'hover:text-text-strong-950 hover:decoration-current': !active,
            // active
            'text-text-strong-950': active,
          },
          className,
        )}
        {...rest}
      >
        {children}
      </Component>
    );
  },
);
BreadcrumbItem.displayName = BREADCRUMB_ITEM_NAME;

function BreadcrumbItemIcon<T extends React.ElementType>({
  className,
  as,
  ...rest
}: PolymorphicComponentProps<T>) {
  const Component = as || 'div';

  return <Component className={cn('size-5', className)} {...rest} />;
}
BreadcrumbItemIcon.displayName = BREADCRUMB_ICON_NAME;

function BreadcrumbItemArrowIcon<T extends React.ElementType>({
  className,
  as,
  ...rest
}: PolymorphicComponentProps<T>) {
  const Component = as || 'div';

  return (
    <Component
      className={cn(
        'flex size-5 select-none items-center justify-center text-text-disabled-300',
        className,
      )}
      {...rest}
    />
  );
}
BreadcrumbItemArrowIcon.displayName = BREADCRUMB_ARROW_NAME;

export {
  BreadcrumbRoot as Root,
  BreadcrumbItem as Item,
  BreadcrumbItemIcon as Icon,
  BreadcrumbItemArrowIcon as ArrowIcon,
};