import { styled } from '../../../styles';
import { visuallyHidden } from '../../../styles/utils';
import { Card as CardComponent } from '../../Card';
import { IconCircled } from '../../IconCircled';

export const Input = styled.input(visuallyHidden);

export const Card = styled(CardComponent)(({ theme }) => ({
  cursor: 'pointer',
  boxSizing: 'border-box',
  border: `1px solid transparent`,
  userSelect: 'none',

  [`${Input}:checked:focus + &`]: {
    borderColor: theme.colors.primary,
  },

  [`${Input}:checked + &, ${Input}:focus + &`]: {
    borderColor: theme.colors.brandMain,
    boxShadow: theme.shadows[2],
  },
}));

export const RadioIcon = styled(IconCircled)(({ theme, checked }) => ({
  flexShrink: 0,
  border: `2px solid ${checked ? 'transparent' : theme.colors.gray[2]}`,
  backgroundColor: checked ? theme.colors.brandMain : 'transparent',
  svg: {
    visibility: checked ? 'visible' : 'hidden',
  },
}));

export const Media = styled(IconCircled)({
  flexShrink: 0,
});
