import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
    flexDirection: 'column',
    gap: '20px',
  },
  row: {
    display: 'flex',
    gap: '20px',
    justifyContent: 'flex-start',
  },
  card: {
    width: '200px',
    height: '100px',
    padding: '16px',
    // background: 'linear-gradient(135deg, rgba(9, 70, 113,0.5) 0%, rgba(9, 70, 113,0.8) 100%)',
    background:'rgba(6, 43, 78,.5)',
    border: '1px solid rgba(9, 70, 113,1)',
    borderRadius: '8px',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between',
    alignItems:'center',
    backdropFilter: 'blur(10px)',
  },
  title: {
    color: '#fff',
    fontSize: '16px',
    fontWeight: 'normal',
  },
  count: {
    color: '#04f21c',
    fontSize: '24px',
    fontWeight: 'bold',
  },
}));

const PatrolStatistics = () => {
  const classes = useStyles();

  const patrolTypes = [
    { title: '日常巡查', count: 456 },
    { title: '汛期巡查', count: 32 },
    { title: '特别巡查', count: 3 },
  ];

  const patrolStatus = [
    { title: '已完成', count: 456 },
    { title: '未完成', count: 32 },
    { title: '进行中', count: 3 },
  ];

  const StatCard = ({ title, count }) => (
    <Paper className={classes.card}>
      <Typography className={classes.title}>{title}</Typography>
      <Typography className={classes.count}>{count} <span style={{fontSize:16,color:"#fff",fontWeight:'normal'}}>次</span></Typography>
    </Paper>
  );

  return (
    <Box className={classes.root}>
      <Box className={classes.row}>
        {patrolTypes.map((item, index) => (
          <StatCard key={`type-${index}`} {...item} />
        ))}
      </Box>
      <Box className={classes.row}>
        {patrolStatus.map((item, index) => (
          <StatCard key={`status-${index}`} {...item} />
        ))}
      </Box>
    </Box>
  );
};

export default PatrolStatistics;