'use client';

import { Snackbar, Alert } from '@mui/material';
import { useUIStore } from '@/stores/uiStore';

export function Toast() {
  const { toast, hideToast } = useUIStore();

  return (
    <Snackbar
      open={toast.open}
      autoHideDuration={3000}
      onClose={hideToast}
      anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
      sx={{ bottom: { xs: 80, sm: 24 } }}
    >
      <Alert
        onClose={hideToast}
        severity={toast.severity}
        variant="filled"
        sx={{ width: '100%' }}
      >
        {toast.message}
      </Alert>
    </Snackbar>
  );
}
