import { Card, EmptyState, Text } from "@shopify/polaris";
import type { Tier } from "../lib/billing-plans";

const TIER_LABEL: Record<Tier, string> = {
  free: "Free",
  starter: "Starter",
  growth: "Growth",
  pro: "Pro",
};

export function UpsellState({
  requiredTier,
  currentTier,
  feature,
  description,
}: {
  requiredTier: Tier;
  currentTier: Tier;
  feature: string;
  description: string;
}) {
  return (
    <Card>
      <EmptyState
        heading={`${feature} needs the ${TIER_LABEL[requiredTier]} plan`}
        action={{ content: "View plans", url: "/app/billing" }}
        image="https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg"
      >
        <Text as="p" variant="bodyMd">
          {description} You're currently on the {TIER_LABEL[currentTier]} plan.
        </Text>
      </EmptyState>
    </Card>
  );
}