'use client'
import Link from 'next/link'

type SectionHeaderProps = {
    kicker?: string
    title: string
    subtitle?: string
    actionLabel?: string
    actionHref?: string
    onAction?: () => void
    rightSlot?: React.ReactNode
}

const SectionHeader = ({
    kicker,
    title,
    subtitle,
    actionLabel,
    actionHref,
    onAction,
    rightSlot,
}: SectionHeaderProps) => {
    const actionClass = "inline-flex items-center gap-1.5 rounded-full bg-white border border-neutral-200 text-neutral-700 hover:text-primary hover:border-primary/40 hover:shadow-soft px-4 h-9 text-xs font-semibold transition-all"

    return (
        <div className="flex flex-col gap-3 mb-5 md:flex-row md:items-end md:justify-between">
            <div className="flex flex-col gap-1.5">
                {kicker && <span className="kicker">{kicker}</span>}
                <h2 className="text-display font-bold md:text-2xl text-xl text-neutral-900 leading-tight">
                    {title}
                </h2>
                {subtitle && <p className="text-neutral-500 text-sm md:text-base">{subtitle}</p>}
            </div>
            <div className="flex items-center gap-2">
                {rightSlot}
                {actionLabel && actionHref && (
                    <Link href={actionHref} className={actionClass}>
                        {actionLabel}
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
                    </Link>
                )}
                {actionLabel && onAction && !actionHref && (
                    <button type="button" onClick={onAction} className={actionClass}>
                        {actionLabel}
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
                    </button>
                )}
            </div>
        </div>
    )
}

export default SectionHeader