import React from "react";
import { Grid, Typography, Card, CardContent, CardMedia, Divider } from "@mui/material";
import color from "../components/imageandgif/color.png"
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 = () => {
    return (
        <Grid
            container
            justifyContent="center"
            alignItems="center"
            sx={{
                position: "relative",
                minHeight: "100vh",
                backgroundImage: `url(${color})`,
                backgroundSize: "contain",
                backgroundPosition: "center",
                backgroundRepeat: "no-repeat",

            }}
        >
            <Typography
                variant="h4"
                sx={{
                    textAlign: "center",
                    fontWeight: "bold",
                    color: "#333",
                    marginBottom: "30px",
                }}
            >
                Our Team
            </Typography>

            <Grid container spacing={1} justifyContent="center">
                {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 Line */}
                            <Divider sx={{ width: "80%", margin: "0 auto 10px auto" }} />

                            <CardMedia
                                component="img"
                                height="140" // Reduced height slightly
                                image={member.image}
                                alt={member.name}
                                sx={{
                                    objectFit: "contain", // Ensure the entire image is visible
                                    width: "80%", // Make the image width smaller
                                    margin: "0 auto", // Center the image
                                    padding: "10px", // Add some spacing around the image
                                }}
                            />

                        </Card>
                    </Grid>
                ))}
            </Grid>
        </Grid>
    );
};

export default OurTeam;
