the-tip-top-frontend/utils/theme.ts

/**
 * Centralized theme and color utility
 * This file consolidates all color schemes and styling constants
 * to eliminate duplication across components.
 */

// Status colors for badges and indicators
export const STATUS_COLORS = {
  PENDING: 'bg-secondary-100 text-secondary-800',
  CLAIMED: 'bg-primary-100 text-primary-800',
  REJECTED: 'bg-red-100 text-red-800',
  ACTIVE: 'bg-primary-100 text-primary-800',
  INACTIVE: 'bg-gray-100 text-gray-800',
  EXPIRED: 'bg-red-100 text-red-800',
} as const;

// Badge color variants
export const BADGE_COLORS = {
  info: 'bg-blue-100 text-blue-800',
  success: 'bg-primary-100 text-primary-800',
  warning: 'bg-secondary-100 text-secondary-800',
  error: 'bg-red-100 text-red-800',
  purple: 'bg-purple-100 text-purple-800',
  pink: 'bg-pink-100 text-pink-800',
  amber: 'bg-secondary-200 text-secondary-800',
  gray: 'bg-gray-100 text-gray-800',
} as const;

// Button style variants
export const BUTTON_STYLES = {
  primary: 'bg-primary-500 text-white px-6 py-2 rounded-lg hover:bg-primary-600 transition-all duration-300',
  secondary: 'bg-secondary-500 text-white px-6 py-2 rounded-lg hover:bg-secondary-600 transition-all duration-300',
  success: 'bg-primary-500 text-white px-6 py-2 rounded-lg hover:bg-primary-600 transition-all duration-300',
  danger: 'bg-red-600 text-white px-6 py-2 rounded-lg hover:bg-red-700 transition-all duration-300',
  warning: 'bg-secondary-400 text-white px-6 py-2 rounded-lg hover:bg-secondary-500 transition-all duration-300',
  outline: 'border border-primary-500 text-primary-500 px-6 py-2 rounded-lg hover:bg-primary-50 transition-all duration-300',
  ghost: 'text-gray-600 px-6 py-2 rounded-lg hover:bg-gray-100 transition-all duration-300',
} as const;

// Common input styling
export const INPUT_STYLES = {
  base: 'w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 disabled:bg-gray-100 disabled:cursor-not-allowed',
  error: 'border-red-500',
  normal: 'border-gray-300',
} as const;

// Card and container styling
export const CARD_STYLES = {
  base: 'bg-white rounded-lg shadow-md p-6',
  hover: 'bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow duration-300',
  bordered: 'bg-white rounded-lg border border-gray-200 p-6',
} as const;

// Alert/notification styles
export const ALERT_STYLES = {
  info: 'bg-blue-50 border border-blue-200 text-blue-800 px-4 py-3 rounded-lg',
  success: 'bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg',
  warning: 'bg-yellow-50 border border-yellow-200 text-yellow-800 px-4 py-3 rounded-lg',
  error: 'bg-red-50 border border-red-400 text-red-700 px-4 py-3 rounded-lg',
} as const;

// Utility function to get status color
export function getStatusColor(status: string): string {
  const upperStatus = status.toUpperCase();
  return STATUS_COLORS[upperStatus as keyof typeof STATUS_COLORS] || BADGE_COLORS.gray;
}

// Utility function to get button style
export function getButtonStyle(variant: keyof typeof BUTTON_STYLES = 'primary'): string {
  return BUTTON_STYLES[variant];
}

// Utility function to get input class with error state
export function getInputStyle(hasError: boolean): string {
  return `${INPUT_STYLES.base} ${hasError ? INPUT_STYLES.error : INPUT_STYLES.normal}`;
}

// Role-based colors for user badges
export const ROLE_COLORS = {
  ADMIN: 'bg-red-100 text-red-800',
  EMPLOYEE: 'bg-blue-100 text-blue-800',
  CLIENT: 'bg-primary-100 text-primary-800',
} as const;

export function getRoleColor(role: string): string {
  const upperRole = role.toUpperCase();
  return ROLE_COLORS[upperRole as keyof typeof ROLE_COLORS] || BADGE_COLORS.gray;
}

// Prize type colors (from constants.ts PRIZE_CONFIG)
export const PRIZE_COLORS = {
  INFUSEUR: 'bg-blue-100 text-blue-800',
  THE_SIGNATURE: 'bg-primary-100 text-primary-800',
  COFFRET_DECOUVERTE: 'bg-purple-100 text-purple-800',
  COFFRET_PRESTIGE: 'bg-secondary-200 text-secondary-800',
  THE_GRATUIT: 'bg-pink-100 text-pink-800',
} as const;

export function getPrizeColor(prizeType: string): string {
  const upperType = prizeType.toUpperCase();
  return PRIZE_COLORS[upperType as keyof typeof PRIZE_COLORS] || BADGE_COLORS.gray;
}