import { style } from '@vanilla-extract/css';
import { recipe, RecipeVariants } from '@vanilla-extract/recipes';

import { textEllipsis, vars } from '../css';

const alertVars = vars.components.alert;

export const alert = recipe({
  base: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    columnGap: alertVars.space.gap,
    padding: `${alertVars.space['padding-y']} ${alertVars.space['padding-x']}`,

    border: '1px solid currentColor',

    fontSize: alertVars.fontSizes.base,
    fontWeight: alertVars.fontWeights.base,
  },

  variants: {
    status: {
      error: {
        color: alertVars.colors['error-text-strong'],
        backgroundColor: alertVars.colors['error'],
      },
      info: {
        color: alertVars.colors['info-text-strong'],
        backgroundColor: alertVars.colors['info'],
      },
    },
  },

  defaultVariants: {
    status: 'info',
  },
});

export type AlertVariants = NonNullable<RecipeVariants<typeof alert>>;

export const alertMessage = style([textEllipsis, { whiteSpace: 'initial' }]);