'use client';

import Link from 'next/link';
import { ChevronLeft } from 'lucide-react';

interface BreadcrumbProps {
  baseUrl: string;
  title: string;
  categoryName?: string;
}

export default function Breadcrumb({ baseUrl, title, categoryName }: BreadcrumbProps) {
  const isNew = baseUrl.includes('new-ads');
  const sectionLabel = isNew ? 'New Ads' : 'Used Products';
  const sectionUrl = isNew ? '/new-ads' : '/used-products';

  return (
    <div className="flex items-center gap-2 text-sm text-gray-500 flex-wrap">
      <Link
        href={baseUrl}
        className="flex h-8 w-8 items-center justify-center rounded-full border hover:bg-gray-100 transition-colors"
        aria-label="Go back"
      >
        <ChevronLeft size={16} />
      </Link>

      <Link href={sectionUrl} className="hover:text-gray-900 transition-colors">
        {sectionLabel}
      </Link>

      {categoryName && categoryName !== '-' && (
        <>
          <span>/</span>
          <Link href={baseUrl} className="hover:text-gray-900 transition-colors capitalize">
            {categoryName}
          </Link>
        </>
      )}

      <span>/</span>

      <span className="font-medium text-black truncate max-w-md">
        {title}
      </span>
    </div>
  );
}