"use client";

import { CurrencyDollarIcon } from '@heroicons/react/24/outline';

export default function NegociacoesPage() {
    return (
        <div className="p-6 h-full flex items-center justify-center">
            <div className="text-center max-w-md">
                <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-green-500 to-emerald-600">
                    <CurrencyDollarIcon className="h-10 w-10 text-white" />
                </div>
                <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
                    Negociações
                </h1>
                <p className="text-gray-600 dark:text-gray-400 mb-4">
                    Esta funcionalidade está em desenvolvimento
                </p>
                <div className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800">
                    <div className="flex gap-1">
                        <span className="animate-bounce inline-block h-2 w-2 rounded-full bg-green-600" style={{ animationDelay: '0ms' }}></span>
                        <span className="animate-bounce inline-block h-2 w-2 rounded-full bg-green-600" style={{ animationDelay: '150ms' }}></span>
                        <span className="animate-bounce inline-block h-2 w-2 rounded-full bg-green-600" style={{ animationDelay: '300ms' }}></span>
                    </div>
                    <span className="text-sm font-medium text-green-600 dark:text-green-400">
                        Em breve
                    </span>
                </div>
            </div>
        </div>
    );
}