import type { FC } from 'react';
import { Breadcrumb as AriaBreadcrumb, Breadcrumbs as AriaBreadcrumbs } from 'react-aria-components';

export interface BreadcrumbsProps {
  items: string[];
}
const Breadcrumbs: FC<BreadcrumbsProps> = (props) => {
  const { items } = props;

  return (
    <nav aria-label="Breadcrumb">
      <AriaBreadcrumbs className="flex items-center gap-2.5">
        <AriaBreadcrumb aria-label="홈">
          <svg
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            width="19"
            height="18"
            viewBox="0 0 19 18"
            fill="none"
          >
            <path
              d="M6.75 14.4545H4.25V7.83333L9.25 4L14.25 7.83333V14.4545H11.75"
              stroke="#6C7789"
              strokeLinecap="square"
            />
            <path d="M10.8381 12.9615V10.3633H7.65625V12.9615" stroke="#6C7789" />
          </svg>
        </AriaBreadcrumb>
        {items.map((item, index) => (
          <AriaBreadcrumb
            className="flex items-center gap-2.5 text-xs text-dabeeo-black-47 data-current:text-dabeeo-black-22"
            key={`breadcrumb-${index}-${item}`}
          >
            <>
              <svg
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                width="6"
                height="8"
                viewBox="0 0 6 8"
                fill="none"
              >
                <path
                  d="M2.70722 4.00064L0.25 1.54349L1.4556 0.337891L5.12572 4.00064L1.45572 7.66347L0.250117 6.45786L2.70722 4.00064Z"
                  fill="#6C7789"
                />
              </svg>
              {item}
            </>
          </AriaBreadcrumb>
        ))}
      </AriaBreadcrumbs>
    </nav>
  );
};

export default Breadcrumbs;