import styled from '@emotion/native';
import Typography from '../../Typography';
import Box from '../../Box';

const StyledHeader = styled(Box)(({ theme }) => ({
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignItems: 'baseline',
  flexWrap: 'wrap',
  marginBottom: theme.__hd__.progress.space.segmentedHeaderMarginBottom,
}));

const StyledTrack = styled(Box)(({ theme }) => ({
  width: '100%',
  height: theme.__hd__.progress.sizes.barHeight,
  borderRadius: theme.__hd__.progress.radii.default,
  overflow: 'hidden',
  flexDirection: 'row',
}));

const StyledSegment = styled(Box)<{
  themeColor: string;
  themeWidthPercent: number;
}>(({ themeColor, themeWidthPercent }) => ({
  backgroundColor: themeColor,
  flexGrow: 0,
  flexShrink: 0,
  width: `${themeWidthPercent}%`,
}));

const StyledEmptyText = styled(Typography.Caption)(({ theme }) => ({
  marginTop: theme.__hd__.progress.space.segmentedLegendMarginTop,
}));

export { StyledHeader, StyledSegment, StyledTrack, StyledEmptyText };