import { define } from '@because/forge'
import { theme } from '../themes'

export const Button = define('Button', {
  base: 'button',
  padding: '6px 12px',
  background: theme('colors-bgElement'),
  border: `1px solid ${theme('colors-border')}`,
  borderRadius: theme('radius-md'),
  color: theme('colors-text'),
  fontSize: 13,
  cursor: 'pointer',
  selectors: {
    '&:hover': { background: theme('colors-bgHover') },
  },
  variants: {
    variant: {
      danger: { borderColor: theme('colors-dangerBorder'), color: theme('colors-dangerText') },
      primary: { background: theme('colors-primary'), borderColor: theme('colors-primary'), color: theme('colors-primaryText') },
    },
  },
})

export const ActionBar = define('ActionBar', {
  display: 'flex',
  gap: 8,
  marginTop: 24,
  paddingTop: 24,
  borderTop: `1px solid ${theme('colors-border')}`,
})

export const NewAppButton = define('NewAppButton', {
  display: 'block',
  padding: '8px 12px',
  background: theme('colors-bgElement'),
  border: `1px solid ${theme('colors-border')}`,
  borderRadius: theme('radius-md'),
  color: theme('colors-textMuted'),
  textDecoration: 'none',
  fontSize: 14,
  textAlign: 'center',
  cursor: 'pointer',
  selectors: {
    '&:hover': { background: theme('colors-bgHover'), color: theme('colors-text') },
  },
})