'use client';

import { Button } from '@/components/actions/Button';
import { ActionLink } from '@/components/actions/ActionLink';
import type { DemoSource } from '@/lib/demo/schema';

export const demoOpenEventName = 'rdg:demo-open';

export interface DemoOpenEventDetail {
  source: DemoSource;
  trigger: HTMLElement;
}

interface DemoTriggerProps {
  label: string;
  source: DemoSource;
  disabledReason?: string | undefined;
  size?: 'small' | 'medium' | 'large';
  fullWidth?: boolean;
  className?: string | undefined;
}

export function DemoTrigger({
  label,
  source,
  disabledReason,
  size = 'medium',
  fullWidth = false,
  className,
}: DemoTriggerProps) {
  if (disabledReason) {
    return (
      <ActionLink
        href="/"
        variant="button-conversion"
        disabledReason={disabledReason}
        className={className}
      >
        {label}
      </ActionLink>
    );
  }

  return (
    <Button
      intent="conversion"
      size={size}
      fullWidth={fullWidth}
      className={className}
      data-demo-source={source}
      onClick={(event) => {
        window.dispatchEvent(
          new CustomEvent<DemoOpenEventDetail>(demoOpenEventName, {
            detail: { source, trigger: event.currentTarget },
          }),
        );
      }}
    >
      {label}
    </Button>
  );
}
