import { Languages } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useLanguage } from '@/contexts/LanguageContext';
import { cn } from '@/lib/utils';

export function LanguageToggle({ className }: { className?: string }) {
  const { language, toggleLanguage } = useLanguage();

  return (
    <Button
      variant="ghost"
      size="sm"
      onClick={toggleLanguage}
      className={cn(
        "h-10 w-auto px-3 gap-2",
        "hover:bg-accent",
        "active:scale-95 transition-transform",
        "touch-manipulation",
        className
      )}
      title={language === 'mr' ? 'Switch to English' : 'मराठी मध्ये बदला'}
    >
      <Languages className="h-4 w-4" />
      <span className="font-semibold text-sm">
        {language === 'mr' ? 'अ' : 'A'}
      </span>
      <span className="text-xs text-muted-foreground hidden sm:inline">
        {language === 'mr' ? 'English' : 'मराठी'}
      </span>
    </Button>
  );
}

// Alternative toggle switch version
export function LanguageToggleSwitch({ className }: { className?: string }) {
  const { language, toggleLanguage } = useLanguage();

  return (
    <button
      onClick={toggleLanguage}
      className={cn(
        "relative inline-flex items-center gap-2",
        "h-10 px-3 rounded-lg",
        "bg-muted hover:bg-muted/80",
        "active:scale-95 transition-all",
        "touch-manipulation",
        className
      )}
      title={language === 'mr' ? 'Switch to English' : 'मराठी मध्ये बदला'}
    >
      <Languages className="h-4 w-4 text-muted-foreground" />
      
      <div className="flex items-center gap-1">
        <span className={cn(
          "text-xs font-semibold px-2 py-1 rounded transition-all",
          language === 'en' && "bg-primary text-primary-foreground"
        )}>
          EN
        </span>
        <span className={cn(
          "text-xs font-semibold px-2 py-1 rounded transition-all",
          language === 'mr' && "bg-primary text-primary-foreground"
        )}>
          मर
        </span>
      </div>
    </button>
  );
}

// Compact version for mobile
export function LanguageToggleCompact() {
  const { language, toggleLanguage } = useLanguage();

  return (
    <button
      onClick={toggleLanguage}
      className={cn(
        "flex items-center justify-center",
        "h-9 w-9 rounded-full",
        "bg-muted hover:bg-muted/80",
        "active:scale-90 transition-all",
        "touch-manipulation"
      )}
      title={language === 'mr' ? 'Switch to English' : 'मराठी मध्ये बदला'}
    >
      <span className="text-sm font-bold">
        {language === 'mr' ? 'अ' : 'A'}
      </span>
    </button>
  );
}