---
import Button from '../ui/Button.astro';

type CTAVariant = 'default' | 'subtle' | 'accent';
type CTAActionVariant = 'text' | 'soft' | 'outline' | 'solid' | 'ghost';
type CTAActionColor = 'neutral' | 'accent';

interface CTAAction {
  label: string;
  href: string;
  external?: boolean;
  variant?: CTAActionVariant;
  color?: CTAActionColor;
  trailingIcon?: string;
}

interface Props {
  variant?: CTAVariant;
  headingLevel?: 2 | 3;
  title?: string;
  description?: string;
  actions?: CTAAction[];
  class?: string;
  [key: string]: unknown;
}

const {
  variant = 'default',
  headingLevel = 2,
  title,
  description,
  actions = [],
  class: className,
  ...attrs
} = Astro.props;
const rootClasses = [
  'not-prose rounded-[min(var(--lotus-radius-lg),1.25rem)] border p-6 sm:p-8',
  variant === 'accent'
    ? 'border-(--lotus-accent) bg-(--lotus-accent-soft)'
    : variant === 'subtle'
      ? 'border-(--lotus-border-subtle) bg-(--lotus-surface)/70'
      : 'border-(--lotus-border-muted) bg-(--lotus-background)',
  className,
];
const hasActions = Astro.slots.has('actions') || actions.length > 0;
const TitleTag = `h${headingLevel}` as keyof HTMLElementTagNameMap;
---

<section class:list={rootClasses} {...attrs}>
  <div class="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
    <div class="max-w-2xl">
      {(Astro.slots.has('title') || title) && (
        <TitleTag class="text-2xl font-semibold leading-tight text-(--lotus-text-strong) sm:text-3xl">
          <slot name="title">{title}</slot>
        </TitleTag>
      )}
      {(Astro.slots.has('description') || description) && (
        <p class="mt-3 text-sm leading-6 text-(--lotus-text-muted) sm:text-base sm:leading-7">
          <slot name="description">{description}</slot>
        </p>
      )}
    </div>

    {hasActions && (
      <div class="flex shrink-0 flex-wrap gap-3">
        <slot name="actions">
          {actions.map((action, index) => (
            <Button
              color={action.color ?? (index === 0 ? 'accent' : 'neutral')}
              external={action.external}
              href={action.href}
              trailingIcon={action.trailingIcon}
              variant={action.variant ?? (index === 0 ? 'solid' : 'outline')}
            >
              {action.label}
            </Button>
          ))}
        </slot>
      </div>
    )}
  </div>
</section>