dros/src/layouts/StateBar.tsx

import React from 'react';
import { Space, Tooltip } from 'antd';
import {
  HddOutlined,
  WifiOutlined,
  FireOutlined,
  BarChartOutlined,
} from '@ant-design/icons';

// 定义状态类型
interface StatusBarProps {
  diskStatus: 'available' | 'warning' | 'unavailable'; // 磁盘状态
  batteryLevel: number; // 电量（0-100）
  wifiStrength: 0 | 1 | 2 | 3 | 4; // WiFi 信号强度
  heatCapacity: number; // 热容（0-100）
}

// 磁盘状态组件
const DiskStatus: React.FC<{ status: StatusBarProps['diskStatus'] }> = ({
  status,
}) => {
  let color: string;
  let title: string;

  switch (status) {
    case 'available':
      color = 'text-green-500'; // Tailwind 绿色
      title = '磁盘空间充足';
      break;
    case 'warning':
      color = 'text-yellow-500'; // Tailwind 黄色
      title = '磁盘空间警告';
      break;
    case 'unavailable':
      color = 'text-red-500'; // Tailwind 红色
      title = '磁盘不可用';
      break;
    default:
      color = 'text-gray-400';
      title = '未知状态';
  }

  return (
    <Tooltip title={title}>
      <HddOutlined className={`${color} text-[1em]`} />
    </Tooltip>
  );
};

// 电量组件
const BatteryStatus: React.FC<{ level: number }> = ({ level }) => {
  const color =
    level <= 20
      ? 'text-red-500'
      : level <= 50
        ? 'text-yellow-500'
        : 'text-green-500';

  return (
    <Tooltip title={`电量: ${level}%`}>
      <BarChartOutlined className={`${color}  h-full`} />
      <span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-xs text-white">
        {level}
      </span>
    </Tooltip>
  );
};

// WiFi 信号组件
const WifiStatus: React.FC<{ strength: StatusBarProps['wifiStrength'] }> = ({
  strength,
}) => {
  const colors = [
    'text-gray-400', // 0格
    'text-red-500', // 1格
    'text-orange-500', // 2格
    'text-yellow-500', // 3格
    'text-green-500', // 4格
  ];
  const title = `WiFi 信号: ${strength} 格`;

  return (
    <Tooltip title={title}>
      <WifiOutlined
        className={`${colors[strength]} ${strength === 0 ? 'scale-75' : 'scale-100'} h-full`}
      />
    </Tooltip>
  );
};

// 热容组件
const HeatCapacityStatus: React.FC<{ capacity: number }> = ({ capacity }) => {
  const color =
    capacity <= 30
      ? 'text-red-500 border-red-500'
      : capacity <= 60
        ? 'text-yellow-500 border-yellow-500'
        : 'text-green-500 border-green-500';

  return (
    <Tooltip title={`热容: ${capacity}%`}>
      {/* 火焰 */}
      <FireOutlined className={`${color}`} />
    </Tooltip>
  );
};

// 主状态栏组件
const StatusBar: React.FC<StatusBarProps> = ({
  diskStatus,
  batteryLevel,
  wifiStrength,
  heatCapacity,
}) => {
  return (
    // <div className="flex justify-end p-2">
    <Space className="h-full">
      <DiskStatus status={diskStatus} />
      <BatteryStatus level={batteryLevel} />
      <WifiStatus strength={wifiStrength} />
      <HeatCapacityStatus capacity={heatCapacity} />
    </Space>
    // </div>
  );
};

export default StatusBar;
export type { StatusBarProps };
export { DiskStatus, BatteryStatus, WifiStatus, HeatCapacityStatus };
export type DiskStatusType = 'available' | 'warning' | 'unavailable';