import { type FC, type ReactElement } from 'react';

import Paper from '@material-hu/mui/Paper';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

export type MetricProps = {
  title: string;
  value: number | string;
  icon: ReactElement;
};

// TODO: Remove this component and replace with StatCard
// File: src/pages/dashboard/Learning/common/components/StatCard.tsx
// Also used in:
// - src/pages/dashboard/Learning/Courses/Report/components/ColabsMetrics.tsx
// - src/pages/dashboard/Learning/Courses/Report/components/SurveysMetrics.tsx
export const MetricCard: FC<MetricProps> = ({ title, value, icon }) => (
  <Stack
    component={Paper}
    elevation={24}
    sx={{
      width: '270px',
      minHeight: '96px',
      flex: 1,
      px: 3,
      py: 1,
      gap: 2,
      borderRadius: '20px',
      backgroundColor: 'paper',
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'flex-start',
    }}
  >
    {icon}
    <Stack
      sx={{
        flexDirection: 'column',
        alignItems: 'flex-start',
        justifyContent: 'center',
      }}
    >
      <Typography
        color="textSecondary"
        variant="body2"
        sx={{
          display: 'inline',
          fontFamily: 'Inter, Roboto',
          fontWeight: 400,
          lineHeight: '22px',
          maxWidth: '143.5px',
        }}
      >
        {title}
      </Typography>
      <Typography
        color="textPrimary"
        variant="h5"
        sx={{
          fontWeight: 600,
          lineHeight: '28.8px',
          fontFamily: 'Inter, Roboto',
        }}
      >
        {value}
      </Typography>
    </Stack>
  </Stack>
);

export default MetricCard;