'use client';

import Link from 'next/link';
import { Eye, ArrowRight } from 'lucide-react';
import { useIsDemoSession } from '@client/hooks/useIsDemoSession';

export default function DemoReadOnlyBanner() {
  const isDemo = useIsDemoSession();
  if (!isDemo) return null;

  return (
    <div
      role="status"
      aria-live="polite"
      className="w-full px-4 py-2 flex items-center justify-center gap-3 text-xs sm:text-sm font-medium border-b"
      style={{
        backgroundColor: 'hsl(35 100% 95%)',
        borderColor: 'hsl(35 90% 80%)',
        color: 'hsl(28 70% 22%)',
      }}
    >
      <Eye size={14} className="shrink-0" />
      <span className="text-center">
        You&rsquo;re exploring a read-only demo &mdash; changes won&rsquo;t be saved.
      </span>
      <Link
        href="/register"
        className="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-semibold shrink-0 transition-colors"
        style={{ backgroundColor: 'hsl(28 90% 50%)', color: 'white' }}
      >
        Start free trial
        <ArrowRight size={12} />
      </Link>
    </div>
  );
}
