import * as React from "react";
import { ArrowUpRight } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardFooter,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";

/**
 * CopilotSuggestionCard — WealthX DS (Molecule)
 *
 * A proactive suggestion the Copilot surfaces with a primary call-to-action
 * that deep-links into the Backoffice (e.g. "Jordan is ready for pre-approval
 * → Open in Backoffice"), plus an optional dismiss. Composes Card + Button.
 *
 * Pure display — host wires onAction (navigation) and onDismiss.
 */

export interface CopilotSuggestionCardProps {
  /** The suggestion headline. */
  title: string;
  /** Optional supporting detail. */
  description?: string;
  /** Primary action — typically a deep-link into the Backoffice. */
  onAction?: () => void;
  actionLabel?: string;
  /** Optional secondary dismiss action. */
  onDismiss?: () => void;
  dismissLabel?: string;
  className?: string;
}

export function CopilotSuggestionCard({
  title,
  description,
  onAction,
  actionLabel = "Open in Backoffice",
  onDismiss,
  dismissLabel = "Dismiss",
  className,
}: CopilotSuggestionCardProps) {
  return (
    <Card
      className={cn("gap-3 border-primary/30 bg-primary/5 py-3", className)}
    >
      <CardHeader className="px-3">
        <CardTitle>{title}</CardTitle>
        {description && <CardDescription>{description}</CardDescription>}
      </CardHeader>

      {(onAction || onDismiss) && (
        <CardFooter className="gap-2 px-3">
          {onAction && (
            <Button
              type="button"
              size="sm"
              onClick={onAction}
              className="h-7 gap-1"
            >
              {actionLabel}
              <ArrowUpRight className="size-3.5" aria-hidden="true" />
            </Button>
          )}
          {onDismiss && (
            <Button
              type="button"
              variant="ghost"
              size="sm"
              onClick={onDismiss}
              className="h-7"
            >
              {dismissLabel}
            </Button>
          )}
        </CardFooter>
      )}
    </Card>
  );
}