import { Link } from 'react-router-dom';
import { Home } from 'lucide-react';
import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/ui/breadcrumb';
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
import { ParkPreviewCard } from '@/components/preview/ParkPreviewCard';
import { CompanyPreviewCard } from '@/components/preview/CompanyPreviewCard';

interface BreadcrumbSegment {
  label: string;
  href?: string;
  showPreview?: boolean;
  previewType?: 'park' | 'company';
  previewSlug?: string;
}

interface EntityBreadcrumbProps {
  segments: BreadcrumbSegment[];
  className?: string;
}

export function EntityBreadcrumb({ segments, className }: EntityBreadcrumbProps) {
  return (
    <Breadcrumb className={className}>
      <BreadcrumbList>
        {/* Home link */}
        <BreadcrumbItem>
          <BreadcrumbLink asChild>
            <Link to="/" className="flex items-center gap-1 hover:text-primary transition-colors">
              <Home className="w-3.5 h-3.5" />
              <span>Home</span>
            </Link>
          </BreadcrumbLink>
        </BreadcrumbItem>

        {segments.map((segment, index) => {
          const isLast = index === segments.length - 1;

          return (
            <BreadcrumbItem key={index}>
              <BreadcrumbSeparator />
              {isLast ? (
                <BreadcrumbPage>{segment.label}</BreadcrumbPage>
              ) : segment.showPreview && segment.previewSlug ? (
                <HoverCard openDelay={300}>
                  <HoverCardTrigger asChild>
                    <BreadcrumbLink asChild>
                      <Link 
                        to={segment.href || '#'} 
                        className="hover:text-primary transition-colors"
                      >
                        {segment.label}
                      </Link>
                    </BreadcrumbLink>
                  </HoverCardTrigger>
                  <HoverCardContent side="bottom" align="start" className="w-auto">
                    {segment.previewType === 'park' && (
                      <ParkPreviewCard slug={segment.previewSlug} />
                    )}
                    {segment.previewType === 'company' && (
                      <CompanyPreviewCard slug={segment.previewSlug} />
                    )}
                  </HoverCardContent>
                </HoverCard>
              ) : (
                <BreadcrumbLink asChild>
                  <Link 
                    to={segment.href || '#'} 
                    className="hover:text-primary transition-colors"
                  >
                    {segment.label}
                  </Link>
                </BreadcrumbLink>
              )}
            </BreadcrumbItem>
          );
        })}
      </BreadcrumbList>
    </Breadcrumb>
  );
}