import React from 'react';
import { Badge } from '@/components/ui/badge';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger
} from '@/components/ui/tooltip';
import { Package, PackageOpen } from 'lucide-react';

interface ApplicationCountCellProps {
  applicationCount?: number;
}

export const ApplicationCountCell: React.FC<ApplicationCountCellProps> = ({
  applicationCount = 0
}) => {
  const count = applicationCount || 0;

  const config = count === 0
    ? {
        icon: <Package className="h-3 w-3" />,
        label: '0个应用',
        variant: 'secondary' as const,
        description: '该环境尚未配置任何应用',
        color: 'text-muted-foreground'
      }
    : count <= 5
    ? {
        icon: <PackageOpen className="h-3 w-3 text-green-500" />,
        label: `${count}个应用`,
        variant: 'success' as const,
        description: `已配置${count}个应用`,
        color: 'text-green-600'
      }
    : {
        icon: <PackageOpen className="h-3 w-3 text-blue-500" />,
        label: `${count}个应用`,
        variant: 'default' as const,
        description: `已配置${count}个应用，应用较多`,
        color: 'text-blue-600'
      };

  return (
    <TooltipProvider>
      <Tooltip delayDuration={300}>
        <TooltipTrigger asChild>
          <div className="flex items-center gap-1.5">
            {config.icon}
            <span className="text-sm font-medium">
              {config.label}
            </span>
          </div>
        </TooltipTrigger>
        <TooltipContent className="max-w-xs bg-gray-900 border-gray-700 text-white">
          <div className="text-white text-xs">
            {config.description}
          </div>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
};
