import React from 'react';
import { Sun, Moon } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { Button } from '../../ui/button';
import { useTheme } from '../../../contexts/ThemeContext';

interface ThemeToggleProps {
  size?: 'sm' | 'md' | 'lg';
  variant?: 'default' | 'outline' | 'ghost';
  className?: string;
  showLabel?: boolean;
}

export function ThemeToggle({
  size = 'md',
  variant = 'ghost',
  className = '',
  showLabel = false,
}: ThemeToggleProps) {
  const { isDark, toggleTheme, disableDarkMode } = useTheme();
  const { t } = useTranslation();

  if (disableDarkMode) {
    return null;
  }

  const getSizeClasses = () => {
    switch (size) {
      case 'sm':
        return 'h-8 w-8 p-0';
      case 'lg':
        return 'h-12 w-12 p-0';
      default:
        return 'h-9 w-9 p-0';
    }
  };

  const getIconSize = () => {
    switch (size) {
      case 'sm':
        return 'h-3 w-3';
      case 'lg':
        return 'h-6 w-6';
      default:
        return 'h-4 w-4';
    }
  };

  const buttonClasses = showLabel ? 'flex items-center gap-2 px-3 py-2' : getSizeClasses();

  return (
    <Button
      variant={variant}
      onClick={toggleTheme}
      className={`group ${buttonClasses} transition-all duration-200 hover:scale-105 ${className}`}
      title={isDark ? t('themeToggle.switchToLight') : t('themeToggle.switchToDark')}
      aria-label={isDark ? t('themeToggle.switchToLight') : t('themeToggle.switchToDark')}
    >
      {isDark ? (
        <>
          <Sun
            className={`${getIconSize()} text-primary dark:text-amber-400 group-hover:opacity-80`}
          />
          {showLabel && <span>{t('themeToggle.lightMode')}</span>}
        </>
      ) : (
        <>
          <Moon className={`${getIconSize()} text-muted-foreground group-hover:text-foreground`} />
          {showLabel && <span>{t('themeToggle.darkMode')}</span>}
        </>
      )}
    </Button>
  );
}