import React from 'react'
import { Pill } from '@payloadcms/ui'
import { getTranslation } from '@payloadcms/translations'
import { I18n } from '@payloadcms/translations' // Import the I18n type for better safety

const baseClass = 'blocks-field'

// 1. Define the shape of your component's props
type CustomBlockLabelProps = {
  i18n: I18n
  rowNumber: number
  rowLabel: string
  data: any // You can replace 'any' with a more specific type if you know the data shape
  blockType: string
}

// 2. Apply the new type to your component's props
const CustomBlockLabel: React.FC<CustomBlockLabelProps> = ({
  i18n,
  rowNumber,
  rowLabel,
  data,
  blockType,
}) => {
  return (
    <>
      <span className={`${baseClass}__block-number`}>
        {String(rowNumber).padStart(2, '0')}
      </span>
      <Pill
        className={`${baseClass}__block-pill ${baseClass}__block-pill-${blockType}`}
        pillStyle="white"
      >
        {getTranslation(rowLabel.slice(0, -3), i18n)}
      </Pill>
      {/* Note: This logic for getting the title might be fragile. 
          Ensure 'data.layout' exists and is an array. */}
      {data.layout?.[rowNumber - 1]?.title && (
         <span className={`section-title`}>{data.layout[rowNumber - 1].title}</span>
      )}
    </>
  )
}

export default CustomBlockLabel