import ProgressCircleChartV2 from '@composed-components/charts/ProgressCircleChart';
import Title from '@design-system/Title';
import { Stack, type SxProps } from '@mui/material';

import ProgressCircleSkeleton from './skeleton';
import { type ProgressCircleProps } from './types';

const ProgressCircle = ({
  copetin,
  title,
  description,
  current = 0,
  total = 100,
  decimalPrecision = 0,
  color,
  sx = {},
  slotProps = {},
  loading = false,
}: ProgressCircleProps) => {
  const progress = (100 * current) / total;
  const value = Math.min(progress, 100);

  if (loading) {
    return <ProgressCircleSkeleton {...slotProps.skeleton} />;
  }

  return (
    <Stack
      className="ProgressCircle-root"
      {...slotProps.root}
      sx={
        {
          ...sx,
          ...slotProps.root?.sx,
          alignItems: 'center',
          gap: 2,
        } as SxProps
      }
    >
      <ProgressCircleChartV2
        value={value}
        color={color}
        decimalPrecision={decimalPrecision}
        {...slotProps.chart}
      />
      <Title
        variant="M"
        copetin={copetin}
        title={title}
        description={description}
        centered
        {...slotProps.title}
      />
    </Stack>
  );
};

export default ProgressCircle;