import Typography from '@mui/material/Typography';
import clsx from 'clsx';
import { memo } from 'react';

function DashboardCategory({ className, title, value, valueColor }) {
  return (
    <button
      type="button"
      className={clsx(
        'flex flex-col items-center justify-center gap-24 max-w-224 w-full h-160 p-24 bg-white shadow-light rounded-20',
        className
      )}
    >
      <Typography variant="body1" className="text-lg text-common-layout font-medium">
        {title}
      </Typography>
      <Typography
        variant="body2"
        className={clsx('text-5xl font-bold', valueColor && `text-${valueColor}`)}
      >
        {value}
      </Typography>
    </button>
  );
}

export default memo(DashboardCategory);
