import React from "react";
import { FiGitBranch, FiCheckCircle, FiAlertCircle } from "react-icons/fi";
import type { FileNode } from "../types";

interface StatusBarProps {
  activeFile: FileNode | null;
}

export const StatusBar: React.FC<StatusBarProps> = ({ activeFile }) => {
  return (
    <div
      style={{
        height: "22px",
        backgroundColor: "#007acc",
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        padding: "0 12px",
        fontSize: "12px",
        color: "#ffffff",
        userSelect: "none",
        flexShrink: 0,
      }}
    >
      <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
        <span style={{ display: "flex", alignItems: "center", gap: "4px" }}>
          <FiGitBranch size={12} /> main
        </span>
        <span style={{ display: "flex", alignItems: "center", gap: "8px" }}>
          <FiCheckCircle size={12} /> 0 <FiAlertCircle size={12} /> 0
        </span>
      </div>
      <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
        {activeFile && (
          <span>
            Ln 1, Col 1 | Spaces: 4 | UTF-8 |{" "}
            {activeFile.path?.split(".").pop()?.toUpperCase() || "TXT"}
          </span>
        )}
        <span>Web VS Code</span>
      </div>
    </div>
  );
};