import React, { useState } from "react";
import { Box, Card, Grid, Typography, Button } from "@mui/material";
import background from "../../../dark-background.jpg";

const CaseStudies: React.FC = () => {
  return (
    <Box sx={{ px: 5, py: 3, height: "900px", marginTop: 20 }}>
      <Grid container spacing={5} justifyContent="center">
        {/* First Card */}
        <Grid item xs={12} md={5.5}>
          <HoverCard
            title="It All Starts At Kaziranga University"
            description="Kaziranga University, A Prestigious Educational..."
            image={background}
          />
          {/* Bottom Section */}
          <Box textAlign="left" mt={4}>
            <Typography variant="body1">
              Check out more digital marketing case studies
            </Typography>
            <Button
              variant="outlined"
              sx={{ mt: 2, borderRadius: "50px", px: 4, py: 1 }}
            >
              VIEW MORE
            </Button>
          </Box>
        </Grid>

        {/* Second Card with Heading */}
        <Grid item xs={12} md={5.5}>
          <Typography variant="h4" fontWeight="bold" sx={{ mb: 3, mt: 4 }}>
            CASE <span style={{ fontWeight: "normal" }}>STUDIES</span>
          </Typography>
          <HoverCard
            title="Instagram AR Filter"
            description="We Came Up With A Unique AR Filter On..."
            image={background}
          />
        </Grid>
      </Grid>
    </Box>
  );
};

const HoverCard: React.FC<{ title: string; description: string; image: string }> = ({
  title,
  description,
  image,
}) => {
  const [hover, setHover] = useState(false);

  return (
    <Card
      sx={{
        position: "relative",
        borderRadius: 2,
        overflow: "hidden",
        boxShadow: 3,
        height: "90vh",
        width: "30vw",
        cursor: "pointer",
        transition: "0.5s",
      }}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
    >
      <Box
        component="img"
        src={image}
        alt={title}
        sx={{
          width: "100%",
          height: "100%",
          objectFit: "cover",
          position: "absolute",
          top: 0,
          left: 0,
          transition: "0.5s",
          filter: hover ? "brightness(0.5)" : "brightness(1)",
        }}
      />
      {hover && (
        <Box
          sx={{
            position: "absolute",
            bottom: 0,
            width: "100%",
            background: "rgba(0, 0, 0, 0.6)",
            color: "white",
            p: 3,
            opacity: hover ? 1 : 0,
            transition: "opacity 0.3s ease-in-out",
          }}
        >
          <Typography variant="h6" fontWeight="bold">
            {title}
          </Typography>
          <Typography variant="body2">{description}</Typography>
        </Box>
      )}
    </Card>
  );
};

export default CaseStudies;
