import React from 'react';
import { Card, CardContent, Typography, Button, Box,Grid, Chip } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(() => ({
  card: {
    marginBottom: '16px',
    backgroundColor: 'transparent',
    '&:hover': {
      boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
    }
  },
  statusChip: {
    position: 'absolute',
    right: '-10px',
    top: '-30px',
    backgroundColor: '#52c41a',
    color: '#fff'
  },
  label: {
    color: '#73ade8',
    width: '80px',
    display: 'inline-block'
  },
  value: {
    color: '#fff',
  },
  buttons: {
    marginTop: '16px',
    '& .MuiButton-root': {
      marginLeft: '8px'
    }
  }
}));

const WarningCard = ({ data, onDelete, onAddPlan }) => {
  const classes = useStyles();

  return (
    <Card className={classes.card}>
      <CardContent>
        <Box position="relative">
          <Typography variant="h6" gutterBottom style={{color:'#fff',marginTop:10}}>
           {data.title}
          </Typography>
        </Box>

        <Grid spacing={1}>
          <Box>
            <span className={classes.label}>情景类别:</span>
            <span className={classes.value}>{data.status}</span>
          </Box>
          <Box>
            <span className={classes.label}>风险隐患:</span>
            <span className={classes.value}>{data.risk}</span>
          </Box>
        </Grid>
      </CardContent>
    </Card>
  );
};

export default WarningCard;