import { Shield } from 'lucide-react';

import type { ZonesSafetyConnection } from '@/shared/types/app';

interface ZoneSafetyConnectionPanelProps {
  readonly connection: ZonesSafetyConnection | null;
}

export function ZoneSafetyConnectionPanel({ connection }: ZoneSafetyConnectionPanelProps) {
  if (!connection) {
    return null;
  }

  return (
    <div className="mt-4 bg-white/80 rounded-xl p-4 border border-amber-200">
      <h4 className="font-semibold text-sm text-amber-800 flex items-center gap-2 mb-2">
        <Shield size={14} />
        {connection.title}
      </h4>
      <p className="text-xs text-gray-600">{connection.description}</p>
    </div>
  );
}
