'use client'
import type { Footer } from '@/payload-types'
import { RowLabelProps, useRowLabel } from '@payloadcms/ui'

export const RowLabel: React.FC<RowLabelProps> = () => {
  type FooterLink = NonNullable<NonNullable<Footer['linkColumns']>[number]['links']>[number]

  const data = useRowLabel<FooterLink>()

  const label = data?.data?.label
    ? `Link ${data.rowNumber !== undefined ? data.rowNumber + 1 : ''}: ${data.data.label}`
    : 'Row'

  return <div>{label}</div>
}