import { usePage } from '@inertiajs/react';
import { useEffect, useState } from 'react';
import { PageProps } from '@/types';

export default function FlashBanner() {
    const { flash } = usePage<PageProps>().props;
    const [visible, setVisible] = useState(false);

    useEffect(() => {
        if (flash?.success) {
            setVisible(true);
            const timer = setTimeout(() => setVisible(false), 4000);
            return () => clearTimeout(timer);
        }
    }, [flash?.success]);

    if (!flash?.success || !visible) {
        return null;
    }

    return (
        <div className="fixed right-6 top-6 z-50 rounded-md bg-status-published px-5 py-3 text-sm font-medium text-white shadow-lift">
            {flash.success}
        </div>
    );
}