import {styled} from '@mui/material/styles';
import {Gauge, gaugeClasses} from '@mui/x-charts/Gauge';
import type {IGaugeChart} from './gauge-chart.type';

const Container = styled('div')`
    display: flex;
    align-items: center;
    justify-content: center;
`;

const StyledGauge = styled(Gauge)<IGaugeChart>`
    & .${gaugeClasses.valueArc} {
        fill: ${({theme, color}) => theme.palette[color || 'primary'][500]};
    }
`;

export const GaugeChartStyle = {
    Container,
    StyledGauge,
};