khata-ui/src/components/ProgressCard/ProgressCard.view.tsx

import * as React from "react";
import {
  Box,
  Typography,
  Paper,
  LinearProgress,
  Divider,
  linearProgressClasses
} from "@mui/material";
import { useTheme, alpha } from "@mui/material/styles";
import { ProgressCardProps } from "./ProgressCard.models";

interface ViewProps extends ProgressCardProps {
  percentage: number;
  formattedProgress: string;
  formattedTotal: string;
}

export default function ProgressCardView({
  header,
  colorTheme = "info",
  percentage,
  formattedProgress,
  formattedTotal,
  compact = false,
}: ViewProps) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";

  return (
    <Paper
      elevation={compact ? 2 : 4}
      sx={{
        width: "100%",
        p: compact ? { xs: 2.5, md: 3 } : { xs: 3, md: 4 },
        borderRadius: compact ? 3 : 4,
        background: (theme) => {
          const baseColor = theme.palette[colorTheme]?.main || theme.palette.primary.main;
          const lightColor = theme.palette[colorTheme]?.light || theme.palette.primary.light;
          return isDark
            ? `linear-gradient(135deg, ${alpha(baseColor, 0.9)} 0%, ${alpha(baseColor, 0.3)} 100%)`
            : `linear-gradient(135deg, ${baseColor} 0%, ${lightColor} 100%)`;
        },
        color: "#fff",
        display: "flex",
        flexDirection: "column",
        alignItems: compact ? "flex-start" : "center",
        justifyContent: "center",
        position: "relative",
        overflow: "hidden",
        border: isDark ? "1px solid rgba(255,255,255,0.1)" : "none",
        boxShadow: (theme) =>
          `0 ${compact ? 6 : 12}px ${compact ? 12 : 24}px -10px ${
            isDark
              ? "rgba(0,0,0,0.5)"
              : theme.palette[colorTheme]?.main || theme.palette.primary.main
          }`,
      }}
    >
      <Typography 
        variant={compact ? "body2" : "subtitle1"} 
        fontWeight={700} 
        sx={{ 
          opacity: 0.95, 
          mb: compact ? 1.5 : 2, 
          width: '100%', 
          overflow: 'hidden', 
          textOverflow: 'ellipsis', 
          whiteSpace: 'nowrap',
          letterSpacing: 0.5,
          textShadow: isDark ? '0 1px 2px rgba(0,0,0,0.3)' : 'none'
        }}
      >
        {header}
      </Typography>

      <Box sx={{ mb: compact ? 2 : 3, width: '100%' }}>
        <Typography
          variant={compact ? "h5" : "h3"}
          fontWeight={900}
          sx={{ mb: 0.5, lineHeight: 1.2, textShadow: isDark ? '0 2px 4px rgba(0,0,0,0.3)' : 'none' }}
        >
          {formattedProgress}
        </Typography>

        <Divider
          sx={{
            my: 1,
            borderColor: "rgba(255,255,255,0.25)",
            width: "100%",
          }}
        />

        <Typography
          variant={compact ? "caption" : "body2"}
          sx={{
            opacity: 0.85,
            fontWeight: 500,
            display: "block",
            color: "rgba(255,255,255,0.9)"
          }}
        >
          of {formattedTotal}
        </Typography>
      </Box>

      <Box sx={{ width: "100%", mt: 'auto' }}>
        <LinearProgress
          variant="determinate"
          value={percentage}
          sx={{
            height: compact ? 6 : 10,
            borderRadius: 5,
            [`&.${linearProgressClasses.colorPrimary}`]: {
              backgroundColor: "rgba(0, 0, 0, 0.25)",
            },
            [`& .${linearProgressClasses.bar}`]: {
              borderRadius: 5,
              backgroundColor: "#fff",
              boxShadow: '0 0 8px rgba(255,255,255,0.4)'
            },
          }}
        />
      </Box>
    </Paper>
  );
}