CedarCopilot/cedar-mail

import { Loader2 } from 'lucide-react';

import { LinkedInLogo, WhatsAppLogo } from '@/modules/inbox/components/channel-icons';

interface ChannelConnectPromptProps {
  channel: 'linkedin' | 'whatsapp';
  isConnecting: boolean;
  onConnect: () => void;
}

const COPY = {
  linkedin: {
    label: 'LinkedIn',
    title: 'Connect your LinkedIn',
    description: 'See your LinkedIn messages right here in your inbox.',
  },
  whatsapp: {
    label: 'WhatsApp',
    title: 'Connect your WhatsApp',
    description: 'See your WhatsApp chats right here in your inbox.',
  },
} as const;

/**
 * Shown in the unibox when the LinkedIn/WhatsApp filter is active but the account
 * isn't connected yet. Mirrors the empty-email state — a circular brand mark over a
 * single connect button — and kicks off the same Unipile hosted-auth flow as
 * settings → connections.
 */
export function ChannelConnectPrompt({ channel, isConnecting, onConnect }: ChannelConnectPromptProps) {
  const copy = COPY[channel];
  const Logo = channel === 'linkedin' ? LinkedInLogo : WhatsAppLogo;

  return (
    <div className="flex h-full items-center justify-center">
      <div className="flex flex-col items-center justify-center gap-2 text-center">
        <div className="border-border/60 bg-muted/30 flex h-28 w-28 items-center justify-center rounded-full border">
          <Logo className="h-12 w-12" />
        </div>
        <div className="mt-4">
          <p className="text-lg">{copy.title}</p>
          <p className="text-md text-muted-foreground dark:text-white/50">{copy.description}</p>
          <div className="mt-4 flex justify-center">
            <button
              onClick={onConnect}
              disabled={isConnecting}
              className="inline-flex h-7 cursor-pointer items-center justify-center gap-1 overflow-hidden rounded-lg border bg-white px-2.5 transition-colors hover:bg-gray-100 disabled:cursor-default disabled:opacity-70 dark:border-none dark:bg-[#313131] dark:hover:bg-[#404040]"
            >
              {isConnecting ? (
                <Loader2 className="h-3.5 w-3.5 animate-spin" />
              ) : (
                <Logo className="h-3.5 w-3.5" />
              )}
              <div className="dark:text-base-gray-950 text-sm leading-none">
                {isConnecting ? `Waiting for ${copy.label}…` : `Connect ${copy.label}`}
              </div>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}