import type { ChunkingMode } from '@/models/datasets'
import * as React from 'react'
import OptionCard from '../option-card'
import { useChunkStructure } from './hooks'

type ChunkStructureProps = {
  chunkStructure: ChunkingMode
}

const ChunkStructure = ({
  chunkStructure,
}: ChunkStructureProps) => {
  const {
    options,
  } = useChunkStructure()

  return (
    <div className="flex flex-col gap-y-1">
      {
        options.map(option => (
          <OptionCard
            key={option.id}
            id={option.id}
            icon={option.icon}
            iconActiveColor={option.iconActiveColor}
            title={option.title}
            description={option.description}
            isActive={chunkStructure === option.id}
            effectColor={option.effectColor}
            showEffectColor
            className="gap-x-1.5 p-3 pr-4"
            disabled
          />
        ))
      }
    </div>
  )
}

export default React.memo(ChunkStructure)