import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Breadcrumbs, Link, Typography, type SxProps, type Theme } from '@mui/material';

export interface BreadcrumbItem {
  /** 显示文本 */
  label: string;
  /** 导航路径 */
  path?: string;
  /** 是否为最后一项（当前页面） */
  isLast?: boolean;
  /** 点击事件处理函数，优先级高于path */
  onClick?: () => void;
}

export interface BaseBreadcrumbsProps {
  /** 面包屑项目列表 */
  items: BreadcrumbItem[];
  /** 自定义样式 */
  sx?: SxProps<Theme>;
  /** 分隔符 */
  separator?: React.ReactNode;
  /** 最大显示项目数 */
  maxItems?: number;
  /** 链接变体 */
  linkVariant?: 'body1' | 'body2' | 'caption' | 'subtitle1' | 'subtitle2';
}

const BaseBreadcrumbs: React.FC<BaseBreadcrumbsProps> = ({
  items,
  sx,
  separator,
  maxItems,
  linkVariant = 'body2'
}) => {
  const navigate = useNavigate();

  const handleItemClick = (item: BreadcrumbItem) => {
    if (item.onClick) {
      item.onClick();
    } else if (item.path) {
      navigate(item.path);
    }
  };

  return (
    <Breadcrumbs 
      sx={{ mb: 2, ...sx }} 
      separator={separator}
      maxItems={maxItems}
    >
      {items.map((item, index) => {
        if (item.isLast) {
          return (
            <Typography key={index} color="text.primary">
              {item.label}
            </Typography>
          );
        }

        return (
          <Link
            key={index}
            component="button"
            variant={linkVariant}
            onClick={() => handleItemClick(item)}
            sx={{ 
              textDecoration: 'none',
              cursor: 'pointer',
              border: 'none',
              background: 'none',
              padding: 0,
              font: 'inherit',
              color: 'inherit'
            }}
          >
            {item.label}
          </Link>
        );
      })}
    </Breadcrumbs>
  );
};

export default BaseBreadcrumbs;