import React, { ComponentProps, PropsWithChildren, ReactNode } from "react";
import { twMerge } from "tailwind-merge";
import Stack from "../layout/Stack";
import Border from "./Border";
import Center from "../layout/Center";
import Row from "../layout/Row";
import Span from "../layout/Span";
import Link from "../layout/Link";

export const ToastStyles = ["normal", "success", "error"] as const;
export const ToastColors = ToastStyles;

export type TWUIEmptyContentProps = ComponentProps<typeof Stack> & {
    title: string;
    url?: string;
    linkProps?: ComponentProps<typeof Link>;
    borderProps?: ComponentProps<typeof Border>;
    textProps?: ComponentProps<typeof Span>;
    contentWrapperProps?: ComponentProps<typeof Row>;
    icon?: ReactNode;
};

/**
 * # EmptyC ontent Component
 * @className twui-empty-content
 * @className twui-empty-content-border
 * @className twui-empty-content-link
 */
export default function EmptyContent({
    title,
    url,
    linkProps,
    icon,
    borderProps,
    textProps,
    contentWrapperProps,
    ...props
}: TWUIEmptyContentProps) {
    const mainComponent = (
        <Stack
            {...props}
            className={twMerge("w-full", "twui-empty-content", props.className)}
        >
            <Border
                {...borderProps}
                className={twMerge(
                    "w-full",
                    borderProps?.className,
                    "twui-empty-content-border"
                )}
            >
                <Center>
                    <Row {...contentWrapperProps}>
                        {icon && <div className="opacity-50">{icon}</div>}
                        <Span
                            size="small"
                            {...textProps}
                            className={twMerge(
                                "opacity-70 text-foreground-light dark:text-foreground-dark",
                                textProps?.className
                            )}
                        >
                            {title}
                        </Span>
                    </Row>
                </Center>
            </Border>
        </Stack>
    );

    if (url) {
        return (
            <Link
                {...linkProps}
                className={twMerge(
                    "w-full",
                    "twui-empty-content-link",
                    linkProps?.className
                )}
                href={url}
            >
                {mainComponent}
            </Link>
        );
    }

    return mainComponent;
}