import { styled, css } from '@mui/material';
import Box from '@mui/material/Box';
import { Radio } from '../@forms/radio';

type StyledBillingOption = {
  selected?: boolean;
  onClick?: () => void;
};
export const StyledBillingOption = styled(Box)<StyledBillingOption>`
  ${({ theme: { spacing, palette, shadows }, selected = false }) => css`
    height: ${spacing(6.125)};
    background-color: ${selected ? palette.secondary[100] : palette.common.white};
    padding: ${spacing(0, 2)};
    display: flex;
    gap: ${spacing(1)};
    justify-content: space-between;
    align-items: center;
    border: 1px solid ${selected ? palette.secondary[500] : palette.primary[200]};
    border-radius: ${spacing(0.5)};
    cursor: pointer;
    user-select: none;

    & > label {
      pointer-events: none;
    }

    &:hover {
      box-shadow: ${shadows[6]};
    }
  `}
`;

export const StyledRadio = styled(Radio)`
  margin: unset;
`;