
'use client'
import React from 'react';
import Link from 'next/link';
import { ChevronRight } from 'lucide-react';

interface BreadcrumbItem {
  label: string;
  href?: string;
  isActive?: boolean;
}

interface BreadcrumbProps {
  items: BreadcrumbItem[];
  title: string;
  description?: string;
  className?: string;
}

const Breadcrumb: React.FC<BreadcrumbProps> = ({ 
  items, 
  title, 
  description,
  className = ""
}) => {
  return (
    <section className={`py-4 ${className}`} style={{ backgroundColor: '#f4f4f4' }}>
      <div className="max-w-7xl mx-auto px-4">
        {/* Breadcrumb Navigation */}
        <nav className="flex items-center space-x-2 text-sm">
          {items.map((item, index) => (
            <React.Fragment key={index}>
              {item.href && !item.isActive ? (
                <Link 
                  href={item.href} 
                  className="hover:opacity-70 transition-opacity duration-200"
                  style={{ color: '#012068' }}
                >
                  {item.label}
                </Link>
              ) : (
                <span 
                  className={item.isActive ? "font-medium" : ""}
                  style={{ color: item.isActive ? '#e64838' : '#012068' }}
                >
                  {item.label}
                </span>
              )}
              {index < items.length - 1 && (
                <ChevronRight className="w-4 h-4" style={{ color: '#012068' }} />
              )}
            </React.Fragment>
          ))}
        </nav>
        
        {/* Page Header */}
        <div className="mt-6">
          <div className="flex items-center mb-4">
            <h1 className="text-3xl font-bold" style={{ color: '#012068' }}>
              {title}
            </h1>
          </div>
          {description && (
            <p className="text-base max-w-4xl leading-relaxed"style={{ color: '#333' }}>
              {description}
            </p>
          )}
        </div>
      </div>
    </section>
  );
};

export default Breadcrumb;