import type { AlertProps } from './types';

import WarningIconWrapper from '~/src/components/Icon/WarningIcon';
import { Card } from '~/src/ui/layouts/card';
import { Layout } from '~/src/ui/layouts/layout';
import { Text } from '~/src/ui/primitives/text';
import { alertStyles, alertVariants } from './styles';

export const Alert = ({ message, variant }: AlertProps) => (
  <Card style={[alertStyles.base, alertVariants[variant]]}>
    <Layout gap="2" padding="6" align="center" justify="center">
      <WarningIconWrapper size={24} />
      <Text variant="body-small">{message}</Text>
    </Layout>
  </Card>
);