import React from 'react';
import { BackpackIcon, GlobeIcon } from '@radix-ui/react-icons';
import type { RadioButtonCardRootProps } from '../../molecules';
import { RadioButtonCard } from '../../molecules';
import { Box, Flex, Typo } from '../../atoms';

const SERVICE_TYPE = {
  onlineCoaching: 'onlineCoaching',
  offlineCoaching: 'offlineCoaching',
} as const;

const breakpoint = 'sm';

function HideSmallBox(props: {
  children: React.ReactElement;
}): React.ReactElement {
  return (
    <Box display={{ initial: 'none', [breakpoint]: 'block' }}>
      {props.children}
    </Box>
  );
}

export function OnOfflineRadioCard(
  props: RadioButtonCardRootProps & {
    response?: boolean;
  }
): React.ReactElement {
  const Wrapper = props.response
    ? HideSmallBox
    : (p: { children: React.ReactElement }): React.ReactElement => p.children;
  const columns = props.response ? { initial: '2', [breakpoint]: '1' } : '1';
  const justify = props.response
    ? { initial: 'center', [breakpoint]: 'between' }
    : 'between';

  return (
    <RadioButtonCard.Root
      RadioWrapper={Wrapper}
      columns={columns}
      gap="2"
      justify={justify}
      {...props}
    >
      <RadioButtonCard.Item value={SERVICE_TYPE.onlineCoaching}>
        <Flex align="center" gap="2">
          <Wrapper>
            <GlobeIcon />
          </Wrapper>
          <Typo>온라인</Typo>
        </Flex>
      </RadioButtonCard.Item>
      <RadioButtonCard.Item value={SERVICE_TYPE.offlineCoaching}>
        <Flex align="center" gap="2">
          <Wrapper>
            <BackpackIcon />
          </Wrapper>
          <Typo>오프라인</Typo>
        </Flex>
      </RadioButtonCard.Item>
    </RadioButtonCard.Root>
  );
}
