import React from "react";
import { FiGitBranch, FiCheckCircle } from "react-icons/fi";

export const TitleBar: React.FC = () => {
  return (
    <div
      style={{
        height: "32px",
        backgroundColor: "#2d2d30",
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        padding: "0 12px",
        borderBottom: "1px solid #3e3e42",
      }}
    >
      <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
        <div style={{ display: "flex", gap: "8px" }}>
          <div
            style={{
              width: "12px",
              height: "12px",
              borderRadius: "50%",
              backgroundColor: "#ed6a5e",
            }}
          />
          <div
            style={{
              width: "12px",
              height: "12px",
              borderRadius: "50%",
              backgroundColor: "#f5bd4f",
            }}
          />
          <div
            style={{
              width: "12px",
              height: "12px",
              borderRadius: "50%",
              backgroundColor: "#61c454",
            }}
          />
        </div>
        <span style={{ color: "#cccccc", fontSize: "12px", fontWeight: 500 }}>
          Web VS Code
        </span>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
        <FiGitBranch size={12} color="#858585" />
        <span style={{ color: "#858585", fontSize: "11px" }}>main</span>
        <FiCheckCircle size={12} color="#61c454" />
      </div>
    </div>
  );
};