crtxdmp.

import styled from 'styled-components/native';
import {PropsWithTheme} from "@Framework/ui";
import {LinearGradient} from "expo-linear-gradient";

export const Root = styled.View`
  border-top-right-radius: 0px;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 4px;
  background: ${(props: PropsWithTheme) => props.theme.colors.lightShade};
  width: 100%;
  padding: ${(props: PropsWithTheme) => props.theme.spacing[0]};
  height: 30px;
  overflow: hidden;
`;

interface FillProps {
    percent: number;
}

export const Fill = styled(LinearGradient).attrs((props: FillProps & PropsWithTheme) => {

    const position = props.percent / 100;

    return {
        colors: [props.theme.colors.mainBrand, props.theme.colors.mainBrand, props.theme.colors.lightShade],
        start: {x: position, y: 1},
        end: {x: position, y: 1},
        locations: [0, position, position],
    };

})<FillProps>`
  height: 100%;
  width: 100%;
`;