import { cn } from "@convertcompany/ui/utils";

import { cn } from "@convertcompany/ui/utils";

// Combinação básica
const className = cn("text-red-500", "bg-blue-100");
// Resultado: "text-red-500 bg-blue-100"

// Com condicionais
const buttonClass = cn(
  "px-4 py-2 rounded font-medium",
  isPrimary && "bg-blue-500 text-white hover:bg-blue-600",
  isDisabled && "opacity-50 cursor-not-allowed"
);

// Resolvendo conflitos
const finalClass = cn("text-red-500", "text-blue-500");
// Resultado: "text-blue-500" (última classe vence)

// Com arrays e objetos
const classes = cn([
  "flex items-center gap-2",
  { "justify-center": isCentered, "justify-between": !isCentered }
]);

// Exemplo prático em componente
function Button({ variant, size, disabled, className, children }) {
  const buttonClass = cn(
    "inline-flex items-center justify-center rounded-md transition-colors",
    variant === "primary" && "bg-blue-500 text-white hover:bg-blue-600",
    variant === "secondary" && "bg-gray-200 text-gray-900 hover:bg-gray-300",
    size === "sm" && "px-3 py-1.5 text-sm",
    size === "lg" && "px-6 py-3 text-lg",
    disabled && "opacity-50 cursor-not-allowed",
    className
  );

  return <button className={buttonClass}>{children}</button>;
}

import { isBright } from "@convertcompany/ui/utils";

import { isBright } from "@convertcompany/ui/utils";

// Cores claras
isBright("#ffffff"); // true
isBright("#f0f0f0"); // true
isBright("white");   // true

// Cores escuras
isBright("#000000"); // false
isBright("#333333"); // false
isBright("black");   // false

// Cores hexadecimais de 3 dígitos
isBright("#fff");    // true
isBright("#000");    // false

// Exemplo prático em componente
function Card({ backgroundColor, children }) {
  const isLightBackground = isBright(backgroundColor);
  
  const cardClass = cn(
    "p-6 rounded-lg border shadow-sm",
    isLightBackground 
      ? "text-gray-900 border-gray-200" 
      : "text-white border-gray-700"
  );

  return (
    <div 
      className={cardClass}
      style={{ backgroundColor }}
    >
      {children}
    </div>
  );
}

// Exemplo de uso
<Card backgroundColor="#f8fafc">
  <h3>Card com fundo claro</h3>
  <p>Texto escuro para contraste</p>
</Card>

<Card backgroundColor="#1e293b">
  <h3>Card com fundo escuro</h3>
  <p>Texto claro para contraste</p>
</Card>