import { usePage } from "@inertiajs/react";
import { CheckIcon, PencilLineIcon, XIcon } from "lucide-react";

import { Badge } from "@/components/ui/badge";

interface 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]: {
      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 style = enumValue ? statusStyles[enumValue.value] : null;
  if (!style || !enumValue) return null;
  const { color, Icon } = style;

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