import { HeartPulse } from 'lucide-react';

/**
 * Inline banner nudging an eligible user who has not logged their Zone today.
 * Rendered above the page content (e.g. Zones of Regulation); the actual
 * check-in happens in the {@link ZoneCheckInCard} below it.
 */
export function ZoneCheckInReminder() {
  return (
    <div
      role="status"
      className="flex items-start gap-3 rounded-2xl border border-amber-500/30 bg-amber-500/10 px-5 py-4"
    >
      <div className="w-9 h-9 rounded-xl bg-amber-500/20 flex items-center justify-center flex-shrink-0">
        <HeartPulse size={18} className="text-amber-300" />
      </div>
      <div>
        <p className="font-semibold text-amber-200 text-sm">You haven't logged your Emotional Zone today</p>
        <p className="text-xs text-amber-200/70 mt-0.5">
          Take a moment to check in on how you're feeling — it's saved to your profile.
        </p>
      </div>
    </div>
  );
}
