import React from 'react';
import Link from 'next/link';
import { ChevronRight, Home } from 'lucide-react';
import { cn } from '@/lib/utils';

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

interface PageHeaderProps {
  title: string;
  description?: string;
  breadcrumbs?: BreadcrumbItem[];
  action?: React.ReactNode;
  className?: string;
  showHome?: boolean;
}

export function PageHeader({
  title,
  description,
  breadcrumbs = [],
  action,
  className,
  showHome = true,
}: PageHeaderProps) {
  return (
    <div className={cn('flex flex-col md:flex-row md:items-center md:justify-between gap-4 pb-6 border-b border-slate-200 mb-6', className)}>
      <div className="space-y-1.5">
        {/* Breadcrumbs */}
        {breadcrumbs.length > 0 && (
          <nav className="flex items-center gap-1.5 text-xs text-text-muted font-medium mb-1 overflow-x-auto whitespace-nowrap">
            {showHome && (
              <Link href="/" className="hover:text-primary transition-colors flex items-center gap-1">
                <Home className="h-3.5 w-3.5" />
              </Link>
            )}
            {breadcrumbs.map((item, index) => (
              <React.Fragment key={index}>
                {(showHome || index > 0) && (
                  <ChevronRight className="h-3.5 w-3.5 flex-shrink-0" />
                )}
                {item.href ? (
                  <Link href={item.href} className="hover:text-primary transition-colors">
                    {item.label}
                  </Link>
                ) : (
                  <span className="text-text-primary font-semibold truncate max-w-[120px] sm:max-w-none">
                    {item.label}
                  </span>
                )}
              </React.Fragment>
            ))}
          </nav>
        )}

        <h1 className="text-2xl md:text-3xl font-extrabold text-text-primary tracking-tight">
          {title}
        </h1>
        {description && (
          <p className="text-sm md:text-base text-text-muted font-medium max-w-2xl leading-normal">
            {description}
          </p>
        )}
      </div>

      {action && (
        <div className="flex items-center gap-3 flex-shrink-0">
          {action}
        </div>
      )}
    </div>
  );
}