'use client';
import {ChevronRight} from 'lucide-react';
import React from 'react';
import {
  Breadcrumb as AriaBreadcrumb,
  Breadcrumbs as AriaBreadcrumbs,
  type BreadcrumbProps,
  type BreadcrumbsProps,
  type LinkProps
} from 'react-aria-components/Breadcrumbs';
import {twMerge} from 'tailwind-merge';
import {Link} from './Link';
import {composeTailwindRenderProps} from './utils';

export function Breadcrumbs<T>(props: BreadcrumbsProps<T>) {
  return <AriaBreadcrumbs {...props} className={twMerge('flex gap-1', props.className)} />;
}

export function Breadcrumb(props: BreadcrumbProps & Omit<LinkProps, 'className'>) {
  return (
    <AriaBreadcrumb
      {...props}
      className={composeTailwindRenderProps(props.className, 'flex items-center gap-1')}>
      {({isCurrent}) => (
        <>
          <Link variant="secondary" {...props} />
          {!isCurrent && (
            <ChevronRight className="w-3 h-3 text-neutral-600 dark:text-neutral-400" />
          )}
        </>
      )}
    </AriaBreadcrumb>
  );
}
