import { styled, View } from '@tamagui/core'
import { createSwitch } from '@tamagui/switch'

const Frame = styled(View, {
  width: 60,
  height: 30,
  borderRadius: 30,
  variants: {
    checked: {
      true: {
        backgroundColor: '$interactiveActive',
      },
      false: {
        backgroundColor: '$colorTertiary',
      },
    },
  } as const,
  defaultVariants: {
    checked: false,
  },
})

const Thumb = styled(View, {
  width: 30,
  height: 30,
  backgroundColor: '$background',
  borderRadius: 20,
  borderColor: '$borderColor',
  borderWidth: 1,

  variants: {
    checked: {
      true: {
        opacity: 1,
      },
      false: {
        opacity: 1,
      },
    },
  } as const,
})

export const Switch = createSwitch({
  Frame,
  Thumb,
})
