import Link from "next/link"

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">
              <Link href={parent.node.url}>
                {parent.node.breadcrumbs?.title ?? parent.node.title}
              </Link>
            </li>
          ) : null}
          {breadcrumbs.edges.map(breadcrumb => (
            <li className="breadcrumb-list__body" key={breadcrumb.node.url}>
              <Link href={breadcrumb.node.url}>
                {breadcrumb.node.breadcrumbs?.title ?? breadcrumb.node.title}
              </Link>
            </li>
          ))}
          <li className="breadcrumb-list__body">
            <span>{title}</span>
          </li>
        </ul>
      </nav>
    </div>
  )
}