import styled, { css } from "styled-components";

export const sizes = {
  xs: {
    height: "8px",
    borderRadius: "4px",
  },
  sm: {
    height: "12px",
    borderRadius: "6px",
  },
  md: {
    height: "16px",
    borderRadius: "8px",
  },
  lg: {
    height: "24px",
    borderRadius: "12px",
  },
  xl: {
    height: "32px",
    borderRadius: "16px",
  },
};

export const ProgressBarContainer = styled.div`
  ${({ size, bgColor }) => css`
    height: ${sizes[size].height};
    border-radius: ${sizes[size].borderRadius};
    background-color: ${bgColor};
  `}
  width: 100%;
  display: flex;
  align-items: center;
`;

export const ProgressBarValue = styled.div`
  transition: width 0.5s ease;
  ${({ value, minValue, maxValue }) => css`
    width: ${(((value - minValue) / (maxValue - minValue)) * 100).toFixed(2)}%;
  `}border-radius: 20px;
  height: 150%;
  background-color: ${({ color }) => color || "#007aff"};
`;
