import { createElement } from "react";
import IconCloudy from "./icons/cond_cloudy.svg";
import IconRainy from "./icons/cond_rainy.svg";
import IconPartlyCloudy from "./icons/cond_partlycloudy.svg";
import IconSnow from "./icons/cond_snow.svg";
import IconSnowy from "./icons/cond_snowy.svg";
import IconSunny from "./icons/cond_sunny.svg";
import IconThunder from "./icons/cond_thunder.svg";

interface WeatherWidgetIconProps {
  icon: string | null;
  size: number;
}

const Icons = {
  CLOUDY: IconCloudy,
  RAINY: IconRainy,
  PARTLYCLOUDY: IconPartlyCloudy,
  SNOW: IconSnow,
  SNOWY: IconSnowy,
  SUNNY: IconSunny,
  THUNDER: IconThunder,
};

export function WeatherWidgetIcon({ icon, size = 16 }: WeatherWidgetIconProps) {
  const svg = Icons[icon as keyof typeof Icons] || null;
  if (!svg || !icon)
    return (
      <div
        style={{
          width: `${size}px`,
          height: `${size}px`,
          textAlign: "center",
          margin: "0 auto",
          fontSize: `${size}px`,
          lineHeight: 1,
          overflow: "hidden",
        }}
        children="--"
      />
    );

  return createElement(svg);
}