import React from "react";
import {
  Card,
  Text,
  Box,
  InlineStack,
} from "@shopify/polaris";
import { LuCircleDashed } from "react-icons/lu";

interface StatusCardProps {
  value: string | number;
  title: string;
  icon?: any; // optional custom icon
  tone?: "success" | "critical" | "warning" | "info" | "base";
  isLoading?: boolean;
}

const CustomSkeleton: React.FC = () => (
  <div
    style={{
      display: "flex",
      flexDirection: "column",
      gap: "8px",
      minWidth: "120px",
    }}
  >
    <div
      style={{
        height: "32px",
        width: "60px",
        background: "#eee",
        borderRadius: "6px",
        marginBottom: "8px",
      }}
    />
    <div
      style={{
        height: "16px",
        width: "80px",
        background: "#eee",
        borderRadius: "4px",
      }}
    />
  </div>
);

export const StatusCard: React.FC<StatusCardProps> = ({
  value,
  title,
  icon = <LuCircleDashed size={32} />,
  isLoading = false,
}) => {
  return (
    <Card>
      <Box padding="400">
        <InlineStack align="space-between" blockAlign="center">
          <Box>
            {isLoading ? (
              <CustomSkeleton />
            ) : (
              <>
                <Text as="h3" variant="headingLg" fontWeight="bold">
                  {value}
                </Text>
                <Text as="p" tone="subdued">
                  {title}
                </Text>
              </>
            )}
          </Box>
          {icon}
        </InlineStack>
      </Box>
    </Card>
  );
};