import type { SubnavMobileProps } from "@/types/components/current/subnavMobile"

export default async function SubnavMobile({
  breadcrumbs,
  parent,
  title,
}: SubnavMobileProps) {
  return (
    <div className="subnav-mobile hidden-small hidden-medium hidden-large">
      <nav className="u-flex">
        <ul className="breadcrumb-list hidden-small hidden-medium hidden-large">
          {parent ? (
            <li className="breadcrumb-list__parent hidden-medium hidden-large">
              <a href={parent.href}>
                {parent.title}
              </a>
            </li>
          ) : null}
          {breadcrumbs.map((breadcrumb) => (
            <li className="breadcrumb-list__body" key={breadcrumb.href}>
              <a href={breadcrumb.href}>
                {breadcrumb.title}
              </a>
            </li>
          ))}
          <li className="breadcrumb-list__body">
            <span>{title}</span>
          </li>
        </ul>
      </nav>
    </div>
  )
}