import { RadioGroup as RadioGroupPrimitive } from '@imwebme/zynk-react-components'
import tw, { css } from 'twin.macro'

const Root = (props: any) => (
  <RadioGroupPrimitive.Root {...props}>
    {props.children}
  </RadioGroupPrimitive.Root>
)
const Item = (props: any) => {
  console.log(props.children)
  return (
    <RadioGroupPrimitive.Item
      {...props}
      css={[
        tw`p-0 !ring-0`,
        css`
          :disabled {
            ${tw`bg-semantic-action-primary-disabled !ring-offset-0`}
            & span[data-state="checked"] {
              & div {
                ${tw`bg-core-im-blue-500`}
              }
            }
          }
          :focus {
            ${tw`!bg-transparent !ring-offset-0`}
          }
          &[data-state='checked'] {
            ${tw`top-0 border-core-im-blue-500`}
          }
          & span[data-state='checked'] {
            & div {
              ${tw`!w-[0.5rem] !h-[0.5rem] bg-core-im-blue-500`}
            }
          }
          @media (max-width: 600px) {
            ${tw`border-2`}
            ${tw`w-[1.5rem] h-[1.5rem]`}
            & span[data-state="checked"] {
              & div {
                ${tw`!w-[0.75rem] !h-[0.75rem]`}
              }
            }
          }
        `,
      ]}
    >
      {props.children}
    </RadioGroupPrimitive.Item>
  )
}

export { Root, Item }
