import React from 'react';
import { useWindStore } from '@/store/appStore';
import { MapPin, Wind } from 'lucide-react';
import { GlobalWindSettingsModal } from './GlobalWindSettingsModal';

export const WindParametersSummary: React.FC = () => {
  const { v0, s1, s2, s3, vk, q, locality } = useWindStore();

  return (
    <div className="rounded-md border bg-muted/40 p-3 space-y-2 mb-6">
      <div className="flex justify-between items-center mb-1">
        <h4 className="text-xs font-semibold flex items-center gap-1.5 text-muted-foreground">
          <Wind className="w-3.5 h-3.5" />
          Vento Base
        </h4>
        <GlobalWindSettingsModal trigger={<button className="text-[10px] underline text-primary cursor-pointer">Editar</button>} />
      </div>
      
      <div className="flex justify-between text-xs items-center">
        <span className="flex items-center gap-1 text-muted-foreground"><MapPin className="w-3 h-3"/> Localidade:</span>
        <span className="font-medium text-foreground truncate max-w-[150px]" title={locality || 'Não selecionada'}>{locality || 'Não selecionada'}</span>
      </div>
      
      <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-[11px]">
        <div className="flex justify-between">
          <span className="text-muted-foreground">V₀:</span>
          <span className="font-mono font-medium">{v0} m/s</span>
        </div>
        <div className="flex justify-between">
          <span className="text-muted-foreground">Vₖ:</span>
          <span className="font-mono font-medium">{vk.toFixed(2)} m/s</span>
        </div>
        <div className="flex justify-between">
          <span className="text-muted-foreground">S₁×S₂×S₃:</span>
          <span className="font-mono">{(s1 * s2 * s3).toFixed(3)}</span>
        </div>
        <div className="flex justify-between">
          <span className="text-muted-foreground">q:</span>
          <span className="font-mono font-medium">{q.toFixed(3)} kN/m²</span>
        </div>
      </div>
    </div>
  );
};
