"use client";

import Link from "next/link"; 
import { useLanguage } from "@/contexts/LanguageContext";
import { localizedPath } from "@/lib/localized-path";

interface BreacrumbProps {
  title?: string;
  page?: string;
  homeLabel?: string;
}


export default function Breacrumb({ title, page, homeLabel = "Home" }: BreacrumbProps) {
  const { language } = useLanguage();

  return (
    <div className="azzle-breadcrumb">
      <div className="container">
        <div className="azzle-breadcrumb-content">
          <h1 className="azzle-breadcrumb-title" data-aos="fade-up" data-aos-delay="500">{title}</h1>
          <div className="azzle-breadcrumb-wrapper" data-aos="fade-up" data-aos-delay="700">
            <div className="azzle-breadcrumb-wrap">
              <div className="azzle-breadcrumb-menu">
                <ul>
                  <li><Link href={localizedPath("/", language)}>{homeLabel}</Link></li>
                  <li><img src="/assets/images/about/arrow-right.png" alt="" /></li>
                  <li aria-current="page">{page}</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}