// Tremor Raw cx [v0.0.0]

import clsx, { type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
import { useEffect, useState } from "react";

export function cx(...args: ClassValue[]) {
  return twMerge(clsx(...args));
}

// Tremor Raw focusInput [v0.0.1]

export const focusInput = [
  // base
  "focus:onvo-ring-2",
  // ring color
  "focus:onvo-ring-blue-200 focus:dark:onvo-ring-blue-700/30",
  // border color
  "focus:onvo-border-blue-500 focus:dark:onvo-border-blue-700",
];

// Tremor Raw focusRing [v0.0.1]

export const focusRing = [
  // base
  "onvo-outline onvo-outline-offset-2 onvo-outline-0 focus-visible:onvo-outline-2",
  // outline color
  "onvo-outline-blue-500 dark:onvo-outline-blue-500",
];

// Tremor Raw hasErrorInput [v0.0.1]

export const hasErrorInput = [
  // base
  "onvo-ring-2",
  // border color
  "onvo-border-red-500 dark:onvo-border-red-700",
  // ring color
  "onvo-ring-red-200 dark:onvo-ring-red-700/30",
];

export const useIsMobile = () => {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth < 768);
    };

    handleResize();
    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  return isMobile;
};