import Link from 'next/link';

import styles from './Overline.module.css';
import { toMilitaryDTG } from '@/lib/utils/date';

interface OverlineProps {
  breadcrumbs?: string[];
  publicationDate: string;
}

export default function Overline({
  breadcrumbs = [],
  publicationDate,
}: OverlineProps) {
  const breadcrumber = breadcrumbs.map((crumb, index) => {
    const isLast = index === breadcrumbs.length - 1;
    const href = `/${breadcrumbs.slice(0, index + 1).join('/')}`;
    return (
      <li key={index} className={styles.crumb}>
        <span className={styles.separator}>/</span>
        {isLast ? (
          <span className={styles.current}>{crumb}</span>
        ) : (
          <Link href={href} className={styles.link}>
            {crumb}
          </Link>
        )}
      </li>
    );
  });
  return (
    <div className={styles.overline}>
      <ul className={styles.breadcrumbs}>
        <li className={styles.crumb}>
          <Link href="/" className={styles.link}>
            dave-dmg.de
          </Link>
        </li>
        {breadcrumber}
      </ul>
      <time className={styles.publicationDate}>
        ⟫ {toMilitaryDTG(publicationDate)}
      </time>
    </div>
  );
}
