import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Typography from "@mui/material/Typography";
import { useTheme } from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";
import Box from "@mui/material/Box";

// Import Material-UI icons
import AdminPanelSettingsIcon from "@mui/icons-material/AdminPanelSettings";
import ManageAccountsIcon from "@mui/icons-material/ManageAccounts";
import PeopleIcon from "@mui/icons-material/People";
import ApartmentIcon from "@mui/icons-material/Apartment";
import { JSX } from "react";
import React from "react";

const iconMap: { [key: string]: JSX.Element } = {
	"TOTAL ADMINS": <AdminPanelSettingsIcon />,
	"TOTAL MANAGERS": <ManageAccountsIcon />,
	"TOTAL USERS": <PeopleIcon />,
	"TOTAL STATIONS": <ApartmentIcon />,
};

export type StatCardProps = {
	title: string;
	value: number | string;
	icon?: JSX.Element;
};

export default function StatCard({ title, value, icon }: StatCardProps) {
	const theme = useTheme();
	const isXsScreen = useMediaQuery(theme.breakpoints.only("xs"));

	const selectedIcon = icon || iconMap[title.toUpperCase()] || null;

	return (
		<Card
			variant="outlined"
			sx={{
				width: "100%",
				borderRadius: "20px",
				border: "none",
				background: "#D0E1E9",
				padding: 2,
			}}
		>
			<CardContent sx={{ padding: "0 !important" }}>
				<Box
					sx={{
						display: "flex",
						justifyContent: "space-between",
						alignItems: "stretch", // Make children fill the container height
					}}
				>
					{/* Left Side: Value & Title */}
					<Box
						sx={{
							display: "flex",
							flexDirection: "column",
							justifyContent: "center",
						}}
					>
						<Typography
							component="h1"
							sx={{
								fontWeight: 700,
								fontSize: {
									xs: "28px",
									sm: "32px",
									md: "36px",
								},
								color: "#000",
								lineHeight: 1.2,
							}}
						>
							{value}
						</Typography>
						<Typography
							component="h2"
							sx={{
								fontWeight: 500,
								fontSize: {
									xs: "12px",
									sm: "14px",
									md: "16px",
								},
								color: "#666",
								textTransform: "uppercase",
							}}
						>
							{title}
						</Typography>
					</Box>

					{/* Right Side: Icon */}
					{selectedIcon && (
						<Box
							sx={{
								display: "flex",
								alignItems: "center",
								justifyContent: "center",
								height: "100%",
								paddingLeft: 2,
							}}
						>
							<Box
								sx={{
									display: "flex",
									alignItems: "center",
									justifyContent: "center",
								}}
							>
								{/* Clone the icon and apply style directly */}
								{React.cloneElement(selectedIcon, {
									sx: {
										fontSize: {
											xs: "54px",
											sm: "65px",
											md: "70px",
										},
										color: "#000",
										transition: "transform 0.3s",
										"&:hover": {
											transform: "scale(1.1)",
										},
									},
								})}
							</Box>
						</Box>
					)}
				</Box>
			</CardContent>
		</Card>
	);
}
