import { useThemeColorStore } from "@/stores/theme-color";
import tinycolor from "tinycolor2";

export const useColor = () => {
  const { primaryColor, secondaryColor } = useThemeColorStore();

  const primary = tinycolor(primaryColor || "#000000"); // Add default fallback
  const secondary = tinycolor(secondaryColor || "#000000"); // Add default fallback
  const dangerColor = tinycolor("#ef4444"); // Standard red-500
  const successColor = tinycolor("#22c55e"); // Standard green-500

  const generateShades = (color: tinycolor.Instance) => ({
    base: color.toHexString(),
    5: color.clone().setAlpha(0.05).toRgbString(),
    10: color.clone().setAlpha(0.1).toRgbString(),
    20: color.clone().setAlpha(0.2).toRgbString(),
    30: color.clone().setAlpha(0.3).toRgbString(),
    40: color.clone().setAlpha(0.4).toRgbString(),
    50: color.clone().setAlpha(0.5).toRgbString(),
    60: color.clone().setAlpha(0.6).toRgbString(),
    70: color.clone().setAlpha(0.7).toRgbString(),
    80: color.clone().setAlpha(0.8).toRgbString(),
    90: color.clone().setAlpha(0.9).toRgbString(),
  });

  return {
    primary: generateShades(primary),
    secondary: generateShades(secondary),
    danger: generateShades(dangerColor),
    success: generateShades(successColor),
  };
};
