"use client";

import Link from "next/link";
import { ChevronLeft } from "lucide-react";
import { EXPERIENCE_PORTAL } from "@/modules/experience/constants/portals";

export function ExperienceBreadcrumbs({ current }: { current: string }) {
  return (
    <nav className="flex items-center gap-1 text-sm text-[var(--muted)]" aria-label="مسیر">
      <Link href={EXPERIENCE_PORTAL.basePath} className="hover:text-[var(--experience-accent)]">
        تربت پیجز
      </Link>
      <ChevronLeft className="h-3 w-3" />
      <span className="text-secondary">{current}</span>
    </nav>
  );
}

export function ExperienceDetailBreadcrumbs({
  parent,
  parentHref,
  current,
}: {
  parent: string;
  parentHref: string;
  current: string;
}) {
  return (
    <nav className="flex items-center gap-1 text-sm text-[var(--muted)]" aria-label="مسیر">
      <Link href={EXPERIENCE_PORTAL.basePath} className="hover:text-[var(--experience-accent)]">
        تربت پیجز
      </Link>
      <ChevronLeft className="h-3 w-3" />
      <Link href={parentHref} className="hover:text-[var(--experience-accent)]">
        {parent}
      </Link>
      <ChevronLeft className="h-3 w-3" />
      <span className="text-secondary">{current}</span>
    </nav>
  );
}