import { Link } from 'react-router-dom';
import { useAuth } from '@/hooks/useAuth';

export default function Ad() {
  const { isAuthenticated, isLoading } = useAuth();

  if (isLoading || isAuthenticated) return null;

  return (
    <div className="mb-8 p-5 bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-xl flex flex-col sm:flex-row items-center gap-4">
      <div className="text-4xl select-none">🎁</div>
      <div className="flex-1 text-center sm:text-left">
        <p className="font-semibold text-gray-800">
          Create a free account — download files up to{' '}
          <span className="text-blue-600 font-bold">2 GB per file!</span>
        </p>
        <p className="text-sm text-gray-500 mt-1">
          Registered users get higher file size limits, even better than most tools out there.
        </p>
      </div>
      <Link
        to="/register"
        className="px-5 py-2.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 whitespace-nowrap transition-colors"
      >
        Sign up free
      </Link>
    </div>
  );
}
