import { Pressable, View } from 'react-native'

import { colors } from '../Colors'

/**
 * Figma: https://www.figma.com/file/PKczUvdmkqdqIvKBgmWsqO/2.0---Components?node-id=4749%3A6280
 */
export const Checkbox: React.FC<{
  checked?: boolean
  muted?: boolean
  onPress: () => void
}> = ({ checked, muted, onPress }) => {
  return (
    <Pressable
      onPress={onPress}
      disabled={muted}
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        borderColor: !muted ? colors.offWhite : colors.metals.metal0,
        borderWidth: 2,
        borderRadius: 4,
        padding: 5,
      }}
    >
      <View
        style={{
          height: 16,
          width: 16,
          backgroundColor: !muted ? colors.white : colors.offWhite,
          borderRadius: 4,
          opacity: checked ? 1 : 0,
        }}
      />
    </Pressable>
  )
}