import {
  Box,
  Card,
  CardContent,
  Typography,
  Button,
  Stack,
} from "@mui/material";
import VisibilityIcon from "@mui/icons-material/Visibility";
import FileDownloadIcon from "@mui/icons-material/FileDownload";

const DataCategories = () => {
  // لیست کارت‌ها (میتوانید این را از دیتابیس بگیرید)
  const categories = [
    { id: 1, title: "آماركلي" },
    { id: 2, title: "تیکت‌های در انتظار" },
    { id: 3, title: "تيكت هاي بحراني" },
    { id: 4, title: "گزارش‌های ماهانه" },
    { id: 5, title: "گزارش‌های ماهانه" },
    { id: 6, title: "گزارش‌های ماهانه" },
    { id: 7, title: "گزارش‌های ماهانه" },
    { id: 8, title: "گزارش‌های ماهانه" },
    { id: 9, title: "گزارش‌های ماهانه" },
    { id: 10, title: "گزارش‌های ماهانه" },
    { id: 11, title: "گزارش‌های ماهانه" },
    { id: 12, title: "گزارش‌های ماهانه" },
    { id: 13, title: "گزارش‌های ماهانه" },
  ];

  return (
    <Box
      sx={{
        display: "grid",
        // ریسپانسیو بودن: در موبایل ۱ ستون، در تبلت ۲، در دسکتاپ ۴ ستون
        gridTemplateColumns: {
          xs: "1fr",
          sm: "1fr 1fr",
          md: "repeat(6, 1fr)",
        },
        gap: 3,
      }}
    >
      {categories.map((item) => (
        <Card
          key={item.id}
          sx={{
            aspectRatio: "1/1", // مربع کردن کارت
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
            transition: "0.3s",
            "&:hover": { boxShadow: 6, transform: "translateY(-5px)" },
          }}
        >
          <CardContent>
            <Typography variant="h6" align="center" gutterBottom>
              {item.title}
            </Typography>
          </CardContent>

          <Stack spacing={1} sx={{ p: 2 }}>
            {/* <Button
              variant="contained"
              startIcon={<VisibilityIcon />}
              fullWidth
            >
              مشاهده
            </Button> */}
            <Button
              variant="outlined"
              startIcon={<FileDownloadIcon />}
              fullWidth
            >
              اکسل
            </Button>
          </Stack>
        </Card>
      ))}
    </Box>
  );
};

export default DataCategories;