import { ActionLink } from '@/components/actions/ActionLink';
import { Card } from '@/components/surfaces/Card';
import { Heading, Text, type HeadingLevel } from '@/components/typography/Typography';
import type { ReactNode } from 'react';
import styles from './CTA.module.css';

export interface CTAAction {
  label: string;
  href?: string;
  disabledReason?: string;
}

interface CTAProps {
  eyebrow?: string;
  title: string;
  body?: string;
  primary: CTAAction;
  secondary?: CTAAction;
  headingLevel?: HeadingLevel;
  layout?: 'inline' | 'section' | 'card';
  primaryNode?: ReactNode;
  secondaryNode?: ReactNode;
}

export function CTA({
  eyebrow,
  title,
  body,
  primary,
  secondary,
  headingLevel = 2,
  layout = 'section',
  primaryNode,
  secondaryNode,
}: CTAProps) {
  return (
    <Card
      as="section"
      tone={layout === 'section' ? 'strong' : 'elevated'}
      padding={layout === 'inline' ? 'compact' : 'spacious'}
      className={`${styles.cta} ${styles[layout]}`}
    >
      <div className={styles.copy}>
        {eyebrow ? <p className={styles.eyebrow}>{eyebrow}</p> : null}
        <Heading level={headingLevel} appearance={layout === 'inline' ? 'subheading' : 'section'}>
          {title}
        </Heading>
        {body ? <Text variant="supporting">{body}</Text> : null}
      </div>
      <div className={styles.actions}>
        {primaryNode ?? (
          <ActionLink
            href={primary.href ?? '/'}
            variant="button-conversion"
            {...(primary.disabledReason ? { disabledReason: primary.disabledReason } : {})}
          >
            {primary.label}
          </ActionLink>
        )}
        {secondaryNode ??
          (secondary ? (
            <ActionLink
              href={secondary.href ?? '/'}
              variant="button-primary"
              {...(secondary.disabledReason ? { disabledReason: secondary.disabledReason } : {})}
            >
              {secondary.label}
            </ActionLink>
          ) : null)}
      </div>
    </Card>
  );
}
