"use client";

import { ChevronLeft } from "@untitledui/icons";
import { Button } from '../buttons/button';

interface BreadcrumbProps {
  backHref: string;
  backLabel: string;
  currentLabel: string;
}

export const Breadcrumb = ({ backHref, backLabel, currentLabel }: BreadcrumbProps) => {
  return (
    <nav className="mb-8" aria-label="Breadcrumb">
      <div className="flex items-center gap-2">
        <Button 
          color="link-gray" 
          size="md" 
          href={backHref}
          iconLeading={ChevronLeft}
          className="text-tertiary hover:text-primary"
        >
          {backLabel}
        </Button>
        <span className="text-tertiary">/</span>
        <span className="text-primary font-medium">{currentLabel}</span>
      </div>
    </nav>
  );
};

export default Breadcrumb;

