import { Fragment } from "react";
import Link from "next/link";

type Crumb = {
  label: string;
  path?: string;
};

const heroBreadcrumbs: Crumb[] = [
  { label: "Home", path: "/" },
  { label: "Blog Standard", path: "/blog-standard" },
  { label: "Blog Details" },
];

const heroMetaItems: Crumb[] = [
  { label: "dashboard", path: "#" },
  { label: "September 10, 2025", path: "#" },
  { label: "0 Comments", path: "#comments" },
];

export default function BlogDetailHeroSection() {
  return (
    <section className="main-sec2 v5">
      <div className="page-banner">
        <div className="carousel-container">
          <div className="page-content">
            <ul
              className="bread-crumbs3"
              data-aos="fade"
              data-aos-duration="900"
              data-aos-delay="300"
            >
              {heroBreadcrumbs.map((item, index) => (
                <Fragment key={`${item.label}-${index}`}>
                  <li>
                    {item.path ? <Link href={item.path}>{item.label}</Link> : item.label}
                  </li>
                  {index < heroBreadcrumbs.length - 1 && <li className="dots"></li>}
                </Fragment>
              ))}
            </ul>

            <h1
              className="title"
              data-aos="fade"
              data-aos-duration="900"
              data-aos-delay="400"
            >
              How Predictive Analytics Helps You Stay Ahead of Competitors
            </h1>

            <ul
              className="bread-crumbs2"
              data-aos="fade"
              data-aos-duration="900"
              data-aos-delay="500"
            >
              {heroMetaItems.map((item) => (
                <li key={item.label}>
                  <Link href={item.path ?? "#"}>{item.label}</Link>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}