import { ResponsiveSize } from "./types";

// Using a simple, intentional workaround to handle the Tailwind scan issue.
const getClassNames = (size: string) => {
  switch (size) {
    case "small":
      return "md:btn-small";
    case "medium":
      return "md:btn-medium";
    case "large":
      return "md:btn-large";
    case "x-large":
      return "md:btn-x-large";
  }
};

export const sizeToClassNames = (size: ResponsiveSize) => {
  let classes = "";

  if (size.base) classes = `btn-${size.base} `;
  if (size.md) classes += `${getClassNames(size.md)} `;
  if (size.lg) classes += `lg:btn-${size.lg} `;

  return classes.trim();
};

export const getLabelSizeBasedOnButtonSize = (size: ResponsiveSize) => {
  let classes = "";

  if (size.base) classes = size.base === "x-large" ? `label3 ` : "label4 ";
  if (size.md) classes += size.md === "x-large" ? `md:label3 ` : "md:label4 ";
  if (size.lg) classes += size.lg === "x-large" ? `lg:label3 ` : "lg:label4 ";

  return classes.trim();
};