import React from 'react';

const extractNames = (lecturers) => {
  return lecturers
    .filter((lecturer) => lecturer.Name || lecturer)
    .map((item) => item.Name || item)
    .join('、');
};

/**
 * 通用项目标签（课程或专辑）
 */
function ItemLabels({ course }) {
  const labels = course.CourseLabelNames || course.CourseLabels;
  if (!labels || labels.length === 0) {
    return <p></p>;
  }
  const albumLabelsDisplay = extractNames(labels);
  if (!albumLabelsDisplay) {
    return null;
  }
  return (
    <div className='absolute max-w-full'>
      <div className='hover:bg-blue-50 m-2 bg-gray-200 opacity-90 text-neutral-800 text-sm px-3 py-1 rounded overflow-hidden text-ellipsis whitespace-nowrap hover:whitespace-normal'>
        {albumLabelsDisplay}
      </div>
    </div>
  );
}

export default ItemLabels;
