'use client';

import { Fragment } from 'react';
import { Icon, Link } from '@theme/components';
import { ROUTES } from '@theme/routes';
import { useLocalization } from '@akinon/next/hooks';
import { BreadcrumbResultType } from '@akinon/next/types';
import { capitalize } from '@akinon/next/utils';

export interface BreadcrumbProps {
  breadcrumbList?: BreadcrumbResultType[];
}

export default function Breadcrumb(props: BreadcrumbProps) {
  const { t, locale } = useLocalization();
  const { breadcrumbList = [] } = props;

  const list = [
    { url: ROUTES.HOME, text: t('common.breadcrumb.homepage') },
    ...breadcrumbList.map((breadcrumb) => ({
      url: breadcrumb.url,
      text: breadcrumb.label
    }))
  ];

  return (
    <div className="flex items-center gap-3 text-xs leading-4 text-gray-950">
      {list.map((item, index) => (
        <Fragment key={index}>
          <Link href={item.url}>
            {capitalize(item.text.toLocaleLowerCase(locale))}
          </Link>
          {index !== list.length - 1 && <Icon name="chevron-end" size={8} />}
        </Fragment>
      ))}
    </div>
  );
}