import React, { useState } from "react";
import {
    Grid,
    Typography,
    Card,
    CardContent,
    CardMedia,
    Divider,
    IconButton,
    Box,
} from "@mui/material";
import { motion } from "framer-motion";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ExpandLessIcon from "@mui/icons-material/ExpandLess";

import robert from "../components/imageandgif/robert.png";

interface TeamMember {
    name: string;
    role: string;
    image: string;
}

const teamMembers: TeamMember[] = [
    { name: "John Doe", role: "Software Engineer", image: robert },
    { name: "Jane Smith", role: "UI/UX Designer", image: robert },
    { name: "Alice Johnson", role: "Project Manager", image: robert },
    { name: "Robert Brown", role: "Marketing Lead", image: robert },
    { name: "Emma Wilson", role: "Backend Developer", image: robert },
    { name: "Michael Davis", role: "Data Analyst", image: robert },
];

const OurTeam: React.FC = () => {
    const [showTeam, setShowTeam] = useState(false);

    return (
        <Grid
            container
            direction="column"
            justifyContent="center"
            alignItems="center"
            sx={{
                minHeight: showTeam ? "100vh" : "auto",
                background: "white",
                textAlign: "center",
                padding: "40px 20px",
            }}
        >
            {/* Title with Expand Icon */}
            <Box
                display="flex"
                alignItems="center"
                gap={1}
                sx={{ cursor: "pointer" }}
                onClick={() => setShowTeam(!showTeam)}
            >
                <Typography variant="h5" sx={{ fontWeight: "bold" }}>
                    Our Team
                </Typography>
                <IconButton sx={{ color: "black" }}>
                    {showTeam ? <ExpandLessIcon /> : <ExpandMoreIcon />}
                </IconButton>
            </Box>

            {/* Expanding Team Section */}
            <motion.div
                initial={{ opacity: 0, height: 0 }}
                animate={{ opacity: showTeam ? 1 : 0, height: showTeam ? "auto" : 0 }}
                transition={{ duration: 0.5, ease: "easeInOut" }}
                style={{ overflow: "hidden", width: "100%" }}
            >
                <Grid container spacing={2} justifyContent="center" sx={{ marginTop: "20px" }}>
                    {teamMembers.map((member, index) => (
                        <Grid item xs={12} sm={6} md={4} key={index}>
                            <Card
                                sx={{
                                    boxShadow: "0 4px 10px rgba(0,0,0,0.15)",
                                    borderRadius: "12px",
                                    textAlign: "center",
                                    transition: "transform 0.3s",
                                    "&:hover": { transform: "translateY(-5px)" },
                                    backgroundColor: "white",
                                    maxWidth: "230px",
                                    margin: "0 auto",
                                }}
                            >
                                <CardContent sx={{ paddingBottom: 1 }}>
                                    <Typography variant="h6" sx={{ fontSize: "1rem", fontWeight: "bold" }}>
                                        {member.name}
                                    </Typography>
                                    <Typography variant="body2" sx={{ fontSize: "0.875rem", color: "gray" }}>
                                        {member.role}
                                    </Typography>
                                </CardContent>

                                {/* Divider */}
                                <Divider sx={{ width: "80%", margin: "0 auto 10px auto" }} />

                                <CardMedia
                                    component="img"
                                    height="140"
                                    image={member.image}
                                    alt={member.name}
                                    sx={{
                                        objectFit: "contain",
                                        width: "80%",
                                        margin: "0 auto",
                                        padding: "10px",
                                    }}
                                />
                            </Card>
                        </Grid>
                    ))}
                </Grid>
            </motion.div>
        </Grid>
    );
};

export default OurTeam;
