'use client'

export interface SectionHeaderProps {
  title: string
  subtitle?: string
  showSeeAll?: boolean
  seeAllHref?: string
  onSeeAllClick?: () => void
}

export function SectionHeader({
  title,
  subtitle,
  showSeeAll = false,
  seeAllHref,
  onSeeAllClick
}: SectionHeaderProps) {
  const handleSeeAllClick = (e: React.MouseEvent) => {
    if (onSeeAllClick) {
      e.preventDefault()
      onSeeAllClick()
    }
  }

  return (
    <div className="flex items-end justify-between mb-6">
      <div>
        <h2 className="text-2xl font-bold text-white mb-1">
          {title}
        </h2>
        {subtitle && (
          <p className="text-sm text-zinc-400">
            {subtitle}
          </p>
        )}
      </div>

      {showSeeAll && (
        <a
          href={seeAllHref || '#'}
          onClick={handleSeeAllClick}
          className="text-sm font-medium text-zinc-400 hover:text-white transition flex items-center gap-1 group"
        >
          See all
          <svg
            className="w-4 h-4 transition-transform group-hover:translate-x-1"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M9 5l7 7-7 7"
            />
          </svg>
        </a>
      )}
    </div>
  )
}