// Components
import { Typography, Stack } from "@mui/material";
import PropTypes from "prop-types";
import { useTheme } from "@emotion/react";
import IconBox from "../../IconBox";

/**
 * `EmptyView` is a functional React component that displays an empty state view with an optional icon, header, and message.
 *
 * @component
 * @param {Object} props - The properties that define the `EmptyView` component.
 * @param {React.ReactNode} [props.icon] - An optional icon to display at the top of the empty view.
 * @param {string} [props.header] - An optional header text displayed next to the icon.
 * @param {string} [props.message="No Data"] - The message to be displayed in the empty view.
 * @param {'h1' | 'h2' | 'h3'} [props.headingLevel="h2"] - The heading level for the message text.
 * @param {string} [props.justifyContent="flex-start"] - The CSS `justify-content` value to align elements vertically.
 * @param {string} [props.height="100%"] - The height of the empty view container.
 *
 * @example
 * // Example usage of EmptyView component:
 * <EmptyView
 *   icon={<SomeIcon />}
 *   header="Average Response Time"
 *   message="No Response Time Available"
 *   headingLevel="h2"
 *   justifyContent="center"
 *   height="50%"
 * />
 *
 * @returns {React.Element} The `EmptyView` component with customizable icon, header, and message.
 */

const EmptyView = ({
    icon,
    header,
    message = "No Data",
    headingLevel = "h2",
    justifyContent = "flex-start",
    height = "100%"
}) => {
    const theme = useTheme();
    return (
        <Stack
            flex={1}
            direction="row"
            sx={{
                backgroundColor: theme.palette.primary.main,

                border: 1,
                borderStyle: "solid",
                borderColor: theme.palette.primary.lowContrast,
                borderRadius: 2,
                borderTopRightRadius: 4,
                borderBottomRightRadius: 4,
            }}
        >
            <Stack
                flex={1}
                alignItems="center"
                sx={{
                    padding: theme.spacing(8),
                    justifyContent,
                    gap: theme.spacing(8),
                    height,
                    "& h2": {
                        color: theme.palette.primary.contrastTextSecondary,
                        fontSize: 15,
                        fontWeight: 500,
                    },

                    "& tspan, & text": {
                        fill: theme.palette.primary.contrastTextTertiary,
                    },
                }}
            >
                <Stack
                    alignSelf="flex-start"
                    direction="row"
                    alignItems="center"
                    gap={theme.spacing(6)}
                >
                    {icon && <IconBox>{icon}</IconBox>}
                    {header && <Typography component="h2">{header}</Typography>}
                </Stack>
                <Stack
                    flex={1}
                    justifyContent="center"
                    alignItems="center"               
                >
                    <Typography component={headingLevel}>
                        {message}
                    </Typography>
                </Stack>
            </Stack>
        </Stack>
    );
};

EmptyView.propTypes = {
    message: PropTypes.string,
    icon: PropTypes.node,
    header: PropTypes.string,
    headingLevel: PropTypes.oneOf(['h1', 'h2', 'h3']),
    justifyContent: PropTypes.string,
    height: PropTypes.string
};

export default EmptyView;