import { Button } from '@/components/ui/button';
import { Cloud, CloudOff } from 'lucide-react';
import { cn } from '@/lib/utils';

interface WeatherToggleProps {
  enabled: boolean;
  onToggle: () => void;
  className?: string;
}

export function WeatherToggle({ enabled, onToggle, className }: WeatherToggleProps) {
  return (
    <Button
      variant={enabled ? 'default' : 'outline'}
      size="sm"
      onClick={onToggle}
      className={cn(
        'gap-2 transition-all',
        enabled && 'bg-blue-500 hover:bg-blue-600 border-blue-500',
        className
      )}
    >
      {enabled ? (
        <>
          <Cloud className="h-4 w-4" />
          <span className="hidden sm:inline">Weather On</span>
        </>
      ) : (
        <>
          <CloudOff className="h-4 w-4" />
          <span className="hidden sm:inline">Weather Off</span>
        </>
      )}
    </Button>
  );
}