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;
  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>
  );
};

export default StatusCard;