import styled, { css } from 'styled-components';
import { convertToTransientProps, getFontSize, getColorAlias, getSpacing, getDarkenColor } from '../../../../utils/index.js';

const SegmentWrapper = styled.button.withConfig({
    shouldForwardProp: convertToTransientProps([
        'hasFocus',
        'segmentPadding',
        'isActive',
    ]),
}) `
  display: flex;
  align-items: center;
  justify-content: center;
  padding: ${(props) => props.segmentPadding};
  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
  border: 2px solid transparent;
  background: transparent;
  border-radius: ${({ theme }) => theme.radius.roundedE};
  font-weight: ${(props) => props.theme.font.weightBold};
  font-family: ${(props) => props.theme.font.familyPrimary};
  ${getFontSize('size14')};
  color: ${(props) => getColorAlias(props.disabled ? 'contentDisabled' : 'contentDefault')};
  svg {
    margin-right: ${getSpacing('s01')};
    fill: ${(props) => getColorAlias(props.disabled ? 'contentDisabled' : 'contentDefault')};
  }

  ${(props) => !props.disabled &&
    css `
      &:hover {
        background: ${getDarkenColor('hover02', 'containerStrong')};
      }
      &:focus {
        border: 2px solid
          ${props.hasFocus ? getColorAlias('focusOuter') : 'transparent'};
      }
      &:active {
        background: ${getDarkenColor('active01', 'containerStrong')};
      }
    `};

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`;
const SegmentLabel = styled.div `
  display: flex;
  align-items: center;
`;

export { SegmentLabel, SegmentWrapper };
