import React from "react";
import { Box, Typography, Button } from "@mui/material";
import { motion } from "framer-motion";
import { Link } from "react-router-dom";

interface CategoryCardProps {
  name: string;
  image: string;
  description: string;
  count: number;
  delay?: number;
}

const CategoryCard: React.FC<CategoryCardProps> = ({
  name,
  image,
  description,
  count,
  delay = 0,
}) => {
  return (
    <motion.div
      initial={{ opacity: 0, y: 50 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5, delay }}
      whileHover={{ y: -10 }}
    >
      <Box
        sx={{
          height: "100%",
          backgroundColor: "#fff",
          borderRadius: "16px",
          overflow: "hidden",
          boxShadow: "0 10px 20px rgba(0,0,0,0.1)",
          transition: "all 0.3s ease",
          "&:hover": {
            boxShadow: "0 15px 30px rgba(0,0,0,0.2)",
          },
        }}
      >
        <Box
          sx={{
            height: "300px",
            backgroundImage: `linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.3)), url(${image})`,
            backgroundSize: "cover",
            backgroundPosition: "center",
          }}
        />
        <Box sx={{ p: 4 }}>
          <Typography variant="h4" fontWeight="bold" sx={{ mb: 1 }}>
            {name}
          </Typography>
          <Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
            {description}
          </Typography>
          <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
            {count} products available
          </Typography>
          <Button
            component={Link}
            to={`/categories/${name.toLowerCase().replace(" ", "-")}`}
            variant="outlined"
            size="medium"
            sx={{
              color: "#000",
              borderColor: "#000",
              "&:hover": {
                backgroundColor: "#000",
                color: "#fff",
              },
            }}
          >
            View Collection
          </Button>
        </Box>
      </Box>
    </motion.div>
  );
};

export default CategoryCard;
