Toast

'use client'

import React from 'react'
import { Button, Stack, Icon, Upload, useToast } from 'biibaos'
import { Info, X } from 'lucide-react'

export default function App() {
  const { toast } = useToast()
  return (
    <Stack gap={12} wrap>
      <Button variant="primary" onClick={() => toast.success('Payment Received', { description: 'The transaction was processed successfully.' })}>Success Toast</Button>
      <Button variant="danger" onClick={() => toast.error('Upload Failed', { description: 'Please check your internet connection.' })}>Error Toast</Button>
      <Button variant="warning" onClick={() => toast.warning('Low Storage', { description: 'You have less than 5% space left.' })}>Warning Toast</Button>
      <Button variant="secondary" onClick={() => toast.info('New Update', { description: 'Version 2.0 is now available for download.' })}>Info Toast</Button>
      <Button variant="ghost" onClick={() => toast.success('Custom Close Icon', { closeIcon: <X size={14} style={{ opacity: 0.5 }} /> })}>Custom Close</Button>
    </Stack>
  )
}