import { useMemo } from "react";
import { Population } from "../utils/saerro";
import * as styles from "./faction-bar-sxs.css";
import { background200, ncFaction, trFaction, vsFaction } from "../utils/theme";

export const FactionBarSxS = ({
  population: { nc, vs, tr },
}: {
  population: Population;
}) => {
  const { vsPercent, ncPercent, trPercent } = useMemo(() => {
    const total = nc + vs + tr;
    return {
      vsPercent: Math.round((vs / total) * 100) || 0,
      ncPercent: Math.round((nc / total) * 100) || 0,
      trPercent: Math.round((tr / total) * 100) || 0,
    };
  }, [vs, nc, tr]);

  return (
    <div className={styles.container}>
      <Bar percent={vsPercent} color={vsFaction} />
      <Bar percent={ncPercent} color={ncFaction} />
      <Bar percent={trPercent} color={trFaction} />
    </div>
  );
};

const Bar = (props: { percent: number; color: string }) => (
  <div
    className={styles.bar}
    style={{
      backgroundImage: `linear-gradient( to top,
    ${props.color} 0% ${props.percent}% ,
    ${background200} ${props.percent + 0.1}% 100% 
  )`,
    }}
  >
    &nbsp;
  </div>
);