import React from 'react';
import { ExternalLinkIcon, XIcon } from 'lucide-react';

import { Button } from '../../ui/button';

/**
 * The canvas beside the conversation: what the merchant opened from the chat
 * is shown here rather than on another page, so the thread that produced it
 * stays on screen and still takes instructions. The whole page is one click
 * away for the times they do want the window to themselves.
 */
export function HomeCanvas({
  title,
  fullPageTo,
  onClose,
  children,
  className = '',
  shellClassName = 'h-[70vh] xl:sticky xl:top-0 xl:h-[calc(100vh-8rem)]',
  bodyClassName = 'p-4',
}: {
  title: string;
  /** The route showing the same thing full page; opened in its own tab, since
   *  the point of the canvas is that the thread stays live beside it. */
  fullPageTo: string;
  onClose: () => void;
  children: React.ReactNode;
  className?: string;
  shellClassName?: string;
  /** The padding around the canvas body; a panel of full-width rows sets it
   *  to nothing and draws its own. */
  bodyClassName?: string;
}): React.ReactElement {
  return (
    <section className={`${className} flex min-w-0 flex-col`}>
      <div
        className={`${shellClassName} flex flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-xs`}
      >
        <header className="flex shrink-0 items-center gap-2 border-b border-border px-4 py-2.5">
          <h2 className="min-w-0 flex-1 truncate text-sm font-semibold text-foreground">
            {title}
          </h2>
          <Button
            nativeButton={false}
            type="button"
            variant="ghost"
            size="icon-sm"
            aria-label={`Open ${title} in a new tab`}
            render={
              <a href={fullPageTo} target="_blank" rel="noreferrer noopener" />
            }
          >
            <ExternalLinkIcon className="h-3.5 w-3.5" />
          </Button>
          <Button
            type="button"
            variant="ghost"
            size="icon-sm"
            aria-label="Close"
            onClick={onClose}
          >
            <XIcon className="h-4 w-4" />
          </Button>
        </header>
        <div className={`min-h-0 flex-1 overflow-y-auto ${bodyClassName}`}>
          {children}
        </div>
      </div>
    </section>
  );
}