// * Packages
import { usePage } from "@inertiajs/react";
import { CheckIcon, PencilLineIcon, XIcon } from "lucide-react";
// * Components shadcn
import { Badge } from "@/components/ui/badge";
// * Other
import { LaravelEnum } from "@/back/types/global";

type DynamicStatusBadgeProps = {
    value: number;
};

// Get a stylised badge for a specific enum value.
export default function DynamicStatusBadge({ value }: DynamicStatusBadgeProps) {
    // Get all enum values, labels and names.
    const { enumDynamicPageStatus } = usePage().props as unknown as {
        enumDynamicPageStatus: LaravelEnum;
    };

    // Set specific icon and style classes for each enum value.
    const statusStyles = {
        [enumDynamicPageStatus.draft.value]: {
            color: "bg-gray-200 dark:bg-gray-900",
            Icon: PencilLineIcon,
        },
        [enumDynamicPageStatus.unpublished.value]: {
            color: "bg-red-200 dark:bg-red-900",
            Icon: XIcon,
        },
        [enumDynamicPageStatus.published?.value ?? "default"]: {
            color: "bg-green-200 dark:bg-green-900",
            Icon: CheckIcon,
        },
    };

    // Get the current enum value.
    const enumValue = Object.values(enumDynamicPageStatus).find(
        (status) => status.value === value,
    );

    // Get the color and icon for the current enum value.
    const { color, Icon } =
        statusStyles[enumValue?.value as keyof typeof statusStyles];

    return (
        <Badge variant="outline" className={`border-0 ${color}`}>
            <Icon size={15} className="mr-1" />
            {enumValue?.label}
        </Badge>
    );
}