Marketplace tile

'use client';

import type { MarketplaceTileProps } from '@ekanos/sdk';
import { Badge } from '@ekanos/ui/badge';
import { Button } from '@ekanos/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@ekanos/ui/card';
import { Icon } from '@ekanos/ui/icon';

export function AcmePaymentsMarketplaceTile({
  onActivate,
  isActivated = false,
  href,
}: MarketplaceTileProps) {
  return (
    <Card className="shadow-card flex h-full flex-col border-0">
      <CardHeader className="gap-3">
        <div className="flex items-start justify-between gap-3">
          <div className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
            <Icon
              name="fa-light fa-credit-card"
              className="h-6 w-6"
              aria-hidden
            />
          </div>
          {isActivated && <Badge variant="secondary">Connected</Badge>}
        </div>
        <CardTitle className="text-lg">Acme Payments</CardTitle>
        <CardDescription>Volume, recent activity, and refunds.</CardDescription>
      </CardHeader>

      <CardContent className="mt-auto flex items-center justify-between gap-3 pb-6">
        <span className="text-muted-foreground text-sm">Payments</span>
        {isActivated ? (
          <Button
            variant="outline"
            size="sm"
            nativeButton={false}
            render={<a href={href ?? '#'} />}
          >
            Manage
          </Button>
        ) : (
          <Button size="sm" onClick={onActivate}>
            Connect
          </Button>
        )}
      </CardContent>
    </Card>
  );
}

{
  accountId: string;                    // from IntegrationComponentProps
  sourceId?: string;                    // optional
  integrationConfig?: Record<string, unknown>; // optional
  productId?: string;                   // exactly one of productId or
  productSlug?: string;                 // productSlug (discriminated union)

  onActivate?: () => void;              // Called when user clicks Connect
  isActivated?: boolean;                // Whether already connected
  href?: string;                        // Manage link URL (if activated)
}

components: {
  marketplaceTile: AcmePaymentsMarketplaceTile,
}

{
  /* shadow-card for elevation, semantic color classes for surfaces and text */
}
<Card className="shadow-card">
  <CardHeader className="bg-card text-foreground">
    <CardTitle className="text-lg">Title</CardTitle>
    <CardDescription className="text-muted-foreground">
      Description
    </CardDescription>
  </CardHeader>
</Card>;