'use client';

import { useEffect, useState } from 'react';
import { Toaster } from 'sonner';

export default function ClientToaster() {
  const [mounted, setMounted] = useState(false);
  useEffect(() => {
    setMounted(true);
  }, []);
  if (!mounted) return null;
  return (
    <Toaster
      position="top-right"
      toastOptions={{
        duration: 3500,
        style: {
          fontFamily: 'DM Sans, system-ui, sans-serif',
          fontSize: '14px',
          borderRadius: '10px',
          border: '1px solid hsl(220, 13%, 91%)',
          boxShadow: '0 10px 24px -4px rgb(0 0 0 / 0.10)',
        },
      }}
    />
  );
}
