import type { PropsWithChildren } from 'react'
import { useRouter } from 'next/router'
import Link from 'next/link'
import cx from 'classnames'

import type { PropsWithClassName } from '@/lib/types'

export type TabItem = {
  label: string
  cssClasses: string
  path: string
}

type Props = PropsWithChildren &
  PropsWithClassName & {
    items: TabItem[]
    accentColor?: string
  }

export default function Tabs({ items, accentColor, className = '' }: Props) {
  const router = useRouter()

  return (
    <div className={cx('flex flex-col sm:flex-row', className)}>
      {items.map(item => {
        const isCurrent = item.path.includes(router.pathname)

        return (
          <Link
            key={item.path}
            href={item.path}
            className={cx(
              'flex-1 p-5 text-h6 text-center text-white whitespace-nowrap',
              accentColor && `hover:bg-accent-${accentColor}`,
              isCurrent && accentColor ? `bg-accent-${accentColor}` : 'bg-black',
              item.cssClasses
            )}
          >
            {item.label}
          </Link>
        )
      })}
    </div>
  )
}