import { ShieldAlert } from 'lucide-react';
import { COSMETIC_BOUNDARY } from '@/services/validationService';

export default function SafetyBoundary({ compact = false, className = '' }) {
  return (
    <div className={`rounded-2xl border border-amber-400/40 bg-amber-400/[0.07] p-4 ${className}`} role="note">
      <div className="flex gap-3">
        <ShieldAlert className="mt-0.5 h-5 w-5 shrink-0 text-amber-300" aria-hidden="true" />
        <div className="min-w-0">
          <strong className="text-sm font-semibold uppercase tracking-[0.16em] text-amber-300">Safety Boundary</strong>
          <p className="mt-1.5 text-xs leading-5 text-amber-100/80">
            {COSMETIC_BOUNDARY}
          </p>
        </div>
      </div>
    </div>
  );
}