/**
 * StatusBar Component
 *
 * iOS-style status bar with time, signal, wifi, and battery.
 */

import React from 'react';

export const StatusBar: React.FC = () => {
  return (
    <div className="h-[44px] flex items-center justify-between px-6 bg-black">
      {/* Time */}
      <span className="text-white text-sm font-semibold">9:41</span>

      {/* Right icons */}
      <div className="flex items-center gap-1">
        {/* Signal */}
        <svg
          width="17"
          height="12"
          viewBox="0 0 17 12"
          fill="white"
          className="opacity-90"
        >
          <rect x="0" y="8" width="3" height="4" rx="0.5" />
          <rect x="4.5" y="5" width="3" height="7" rx="0.5" />
          <rect x="9" y="2" width="3" height="10" rx="0.5" />
          <rect x="13.5" y="0" width="3" height="12" rx="0.5" />
        </svg>

        {/* WiFi */}
        <svg
          width="16"
          height="12"
          viewBox="0 0 16 12"
          fill="white"
          className="opacity-90 ml-1"
        >
          <path d="M8 2.5C10.5 2.5 12.8 3.5 14.5 5.2L13.2 6.5C11.8 5.1 10 4.3 8 4.3C6 4.3 4.2 5.1 2.8 6.5L1.5 5.2C3.2 3.5 5.5 2.5 8 2.5Z" />
          <path d="M8 5.5C9.6 5.5 11 6.2 12 7.2L10.7 8.5C10 7.8 9 7.3 8 7.3C7 7.3 6 7.8 5.3 8.5L4 7.2C5 6.2 6.4 5.5 8 5.5Z" />
          <circle cx="8" cy="10" r="1.5" />
        </svg>

        {/* Battery */}
        <svg
          width="25"
          height="12"
          viewBox="0 0 25 12"
          fill="white"
          className="opacity-90 ml-1"
        >
          <rect
            x="0.5"
            y="0.5"
            width="21"
            height="11"
            rx="2.5"
            stroke="white"
            strokeOpacity="0.35"
            fill="none"
          />
          <rect x="2" y="2" width="18" height="8" rx="1.5" fill="white" />
          <path
            d="M23 4V8C23.8 7.7 24.5 6.9 24.5 6C24.5 5.1 23.8 4.3 23 4Z"
            fillOpacity="0.4"
          />
        </svg>
      </div>
    </div>
  );
};
