import { Card, BlockStack, Text, Button } from "@shopify/polaris";
import { ExternalIcon } from "@shopify/polaris-icons";

export function StorefrontSetupCard() {
  return (
    <Card>
      <BlockStack gap="200">
        <Text as="h2" variant="headingMd">
          Storefront Setup
        </Text>
        <Text as="p" variant="bodyMd">
          Ensure the "Reviews" block is added to your Default Product Template in the Online Store editor.
        </Text>
        <Button target="_blank" url="shopify:admin/themes/current/editor?context=product" icon={ExternalIcon}>
          Open Theme Editor
        </Button>
      </BlockStack>
    </Card>
  );
}