import { Link } from 'react-router-dom';
import NeonCard from './NeonCard/NeonCard';
import type { SetupStatus } from '../help/setupStatus';

export default function SetupBanner({ status }: { status: SetupStatus }) {
  if (!status.needsCalibration) return null;
  return (
    <NeonCard accent="amber" className="calibrate-banner" hud style={{ marginBottom: '1rem' }}>
      <p className="font-tech">SETUP INCOMPLETE</p>
      <ul className="form-hint" style={{ margin: '0.5rem 0', paddingLeft: '1.25rem' }}>
        {status.reasons.map((r) => (
          <li key={r}>{r}</li>
        ))}
      </ul>
      <p className="form-hint">Finish one-time calibration so Forge and the pool relay use your wallet and LAN URL.</p>
      <Link to="/settings" className="btn btn-primary btn-sm" style={{ marginTop: '0.75rem' }}>
        Open Calibrate →
      </Link>
    </NeonCard>
  );
}
