import styled from 'styled-components';

import { ThemeObject } from '../Theme';

export const StyledProgressBar = styled.div.attrs(
  (props: { $theme: ThemeObject; $color: keyof ThemeObject['pallet']; $customColor?: string }) => ({
    $theme: props.$theme,
    $color: props.$color,
    $customColor: props.$customColor,
  })
)`
  background: ${(props) => props.$customColor ?? props.$theme.pallet[props.$color]};
`;

export const StyledProgressLine = styled.div.attrs((props: { $theme: ThemeObject; $color?: keyof ThemeObject['pallet'] }) => ({
  $theme: props.$theme,
  $color: props.$color,
}))`
  background: ${(props) => (props.$color ? props.$theme.pallet[props.$color] : props.$theme.pallet.gray20)};
`;
