/**
 * StatusBar 状态栏组件 (移动端)
 * 设计稿参考: UIDesignSpec.md 3.1
 */
import React from 'react';
import { Signal, Wifi, BatteryFull } from 'lucide-react';

export interface StatusBarProps {
  time?: string;
  className?: string;
}

export const StatusBar: React.FC<StatusBarProps> = ({
  time = '9:41',
  className = '',
}) => {
  return (
    <div
      className={`
        flex items-center justify-between
        h-status-bar px-6
        bg-bg-page safe-area-top
        ${className}
      `}
    >
      {/* Time */}
      <span className="text-body font-semibold text-text-primary">
        {time}
      </span>

      {/* Status Icons */}
      <div className="flex items-center gap-1">
        <Signal size={16} className="text-text-primary" />
        <Wifi size={16} className="text-text-primary" />
        <BatteryFull size={16} className="text-text-primary" />
      </div>
    </div>
  );
};

export default StatusBar;