const elementBackgroundColors: Record<string, string> = {
  Pyro: "#120000",
  Hydro: "#000512",
  Anemo: "#061415",
  Electro: "#0D000F",
  Dendro: "#000F04",
  Cryo: "#032021",
  Geo: "#0F0D00",
};

const elementIconFilters: Record<string, string> = {
  Anemo: "brightness(0) saturate(100%) invert(76%) sepia(19%) saturate(867%) hue-rotate(113deg) brightness(92%) contrast(86%)",
  Geo: "brightness(0) saturate(100%) invert(77%) sepia(80%) saturate(1159%) hue-rotate(337deg) brightness(99%) contrast(90%)",
  Electro: "brightness(0) saturate(100%) invert(66%) sepia(17%) saturate(1525%) hue-rotate(225deg) brightness(91%) contrast(89%)",
  Dendro: "brightness(0) saturate(100%) invert(70%) sepia(39%) saturate(713%) hue-rotate(32deg) brightness(93%) contrast(87%)",
  Hydro: "brightness(0) saturate(100%) invert(71%) sepia(68%) saturate(1329%) hue-rotate(164deg) brightness(97%) contrast(95%)",
  Pyro: "brightness(0) saturate(100%) invert(54%) sepia(72%) saturate(1836%) hue-rotate(339deg) brightness(99%) contrast(89%)",
  Cryo: "brightness(0) saturate(100%) invert(87%) sepia(20%) saturate(952%) hue-rotate(167deg) brightness(93%) contrast(89%)",
};

export function elementBackgroundColor(element: string | null | undefined): string {
  return (element && elementBackgroundColors[element]) || "#17383d";
}

export function elementIconFilter(element: string): string | undefined {
  return elementIconFilters[element];
}