'use client'

import Link from 'next/link'
import { ArrowRight } from 'lucide-react'
import { useLocale } from 'next-intl'

interface TopicDividerProps {
  label: string
  viewAllHref?: string
  viewAllLabel?: string
}

const TopicDivider = ({ label, viewAllHref, viewAllLabel }: TopicDividerProps) => {
  const locale = useLocale()
  const lp = (path: string) => `/${locale}${path}`

  return (
    <div className="flex items-center justify-between border-t-[3px] border-secondary-900 pt-3 mb-5 mt-8">
      <h2 className="text-sm font-bold uppercase tracking-wider text-secondary-900">
        {label}
      </h2>
      {viewAllHref && viewAllLabel && (
        <Link
          href={lp(viewAllHref)}
          className="inline-flex items-center text-xs font-medium text-primary-600 hover:text-primary-700 transition-colors"
        >
          {viewAllLabel}
          <ArrowRight className="ml-1 h-3 w-3" />
        </Link>
      )}
    </div>
  )
}

export default TopicDivider