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

export const ErrorBox = define('ErrorBox', {
  padding: '10px 12px',
  background: theme('colors-errorBg'),
  border: `1px solid ${theme('colors-errorBorder')}`,
  borderRadius: 6,
  color: theme('colors-error'),
  fontSize: 14,
})

export const NetworkItem = define('NetworkItem', {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  padding: '12px 16px',
  cursor: 'pointer',
  borderBottom: `1px solid ${theme('colors-border')}`,
  selectors: {
    '&:hover': { background: theme('colors-bgHover') },
    '&:last-child': { borderBottom: 'none' },
  },
})

export const NetworkListWrap = define('NetworkListWrap', {
  maxHeight: 320,
  overflowY: 'auto',
  border: `1px solid ${theme('colors-border')}`,
  borderRadius: theme('radius-md'),
})

export const NetworkMeta = define('NetworkMeta', {
  display: 'flex',
  alignItems: 'center',
  gap: 8,
  color: theme('colors-textMuted'),
  fontSize: 13,
})

export const NetworkName = define('NetworkName', {
  fontWeight: 500,
})

export const SignalBarSegment = define('SignalBarSegment', {
  width: 3,
  borderRadius: 1,
  variants: {
    level: {
      active: { background: theme('colors-statusRunning') },
      inactive: { background: theme('colors-border') },
    },
  },
})

export const SignalBarsWrap = define('SignalBarsWrap', {
  display: 'inline-flex',
  alignItems: 'flex-end',
  gap: 2,
  height: 14,
})

export const Spinner = define('Spinner', {
  width: 32,
  height: 32,
  border: `3px solid ${theme('colors-border')}`,
  borderTopColor: theme('colors-statusRunning'),
  borderRadius: '50%',
  margin: '0 auto 16px',
  animation: 'spin 0.8s linear infinite',
})

export const SpinnerWrap = define('SpinnerWrap', {
  padding: '32px 0',
  textAlign: 'center',
})

export const SuccessCheck = define('SuccessCheck', {
  width: 48,
  height: 48,
  background: theme('colors-statusRunning'),
  color: theme('colors-bg'),
  fontSize: 24,
  fontWeight: 'bold',
  borderRadius: '50%',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  margin: '0 auto 12px',
})

export const WifiColumn = define('WifiColumn', {
  display: 'flex',
  flexDirection: 'column',
  gap: 16,
  maxWidth: 400,
})