frontend/src/components/DatasetSelector.tsx

import React from 'react'
import DatasetInfoIcon from './DatasetInfoIcon'

interface DatasetSelectorProps {
  datasetNames: string[]
  selectedDatasetName: string
  onDatasetNameChange: (datasetName: string) => void
}

const DatasetSelector: React.FC<DatasetSelectorProps> = ({
  datasetNames,
  selectedDatasetName,
  onDatasetNameChange,
}) => {
  return (
    <div className="">
      <fieldset className="fieldset w-full p-4 rounded border border-gray-700 bg-base-200">
        <legend className="fieldset-legend font-semibold">Dataset</legend>
        <div className="flex flex-wrap gap-2">
          {datasetNames.map((datasetName) => (
            <label key={datasetName} className="flex items-center cursor-pointer">
              <input
                type="radio"
                name="dataset"
                className="radio radio-sm"
                checked={selectedDatasetName === datasetName}
                onChange={() => onDatasetNameChange(datasetName)}
              />
              <span className="text-sm ml-2">{datasetName}</span>
              <DatasetInfoIcon datasetName={datasetName} />
            </label>
          ))}
        </div>
      </fieldset>
    </div>
  )
}

export default DatasetSelector