import React from 'react';
import { Separator } from '@/components/ui/separator';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';

export const PressureLegend: React.FC = () => {
  return (
    <div className="absolute bottom-4 left-4 z-10 flex gap-3 p-3 bg-background/90 backdrop-blur-md border border-border rounded-lg shadow-sm">
      <Tooltip>
        <TooltipTrigger asChild>
          <div className="flex items-center gap-2 cursor-help">
            <div className="w-3 h-3 rounded-full bg-blue-500 shadow-[0_0_8px_rgba(59,130,246,0.5)]" />
            <span className="text-xs font-medium text-foreground underline decoration-dashed decoration-muted-foreground underline-offset-4">
              Pressão (Empuxo)
            </span>
          </div>
        </TooltipTrigger>
        <TooltipContent side="top">
          <p className="text-sm">
            <b>Azul (+)</b>: O vento está "empurrando" a superfície para dentro.
          </p>
        </TooltipContent>
      </Tooltip>

      <Separator orientation="vertical" className="h-4" />

      <Tooltip>
        <TooltipTrigger asChild>
          <div className="flex items-center gap-2 cursor-help">
            <div className="w-3 h-3 rounded-full bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.5)]" />
            <span className="text-xs font-medium text-foreground underline decoration-dashed decoration-muted-foreground underline-offset-4">
              Sucção (Arrasto)
            </span>
          </div>
        </TooltipTrigger>
        <TooltipContent side="top">
          <p className="text-sm">
            <b>Vermelho (-)</b>: O vento está "puxando" a superfície para fora.
          </p>
        </TooltipContent>
      </Tooltip>
    </div>
  );
};
