import { Show, type JSX } from 'solid-js'
import { cn } from '@/utils/cn'

interface SectionHeadingProps {
  eyebrow?: string
  title: string
  description?: string
  badge?: JSX.Element
  action?: JSX.Element
  class?: string
}

export const SectionHeading = (props: SectionHeadingProps) => (
  <div class={cn('flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between', props.class)}>
    <div class="min-w-0">
      <Show when={props.eyebrow}>
        <p class="text-[10px] font-semibold uppercase tracking-widest text-muted-fg">{props.eyebrow}</p>
      </Show>
      <h2 class="mt-3 text-2xl font-semibold text-fg leading-tight">{props.title}</h2>
      <Show when={props.description}>
        <p class="mt-3 max-w-2xl text-sm text-muted-fg leading-relaxed">{props.description}</p>
      </Show>
    </div>

    <div class="flex shrink-0 flex-wrap items-center gap-3">
      <Show when={props.badge}>{props.badge}</Show>
      <Show when={props.action}>{props.action}</Show>
    </div>
  </div>
)
