import React from "react";
import TagBadge from "../TagBadge/TagBadge";

/**
 * TagList Component
 *
 * Displays a list of tags in a flexible layout.
 *
 * @param {Object} props
 * @param {Array} props.tags - Array of tag objects
 * @param {Function} props.onTagClick - Optional callback when a tag is clicked
 * @param {Function} props.onTagRemove - Optional callback when a tag is removed
 * @param {boolean} props.removable - Whether tags can be removed (default: false)
 * @param {boolean} props.clickable - Whether tags are clickable (default: false)
 * @param {string} props.size - Size variant for badges: 'sm', 'md', 'lg' (default: 'md')
 * @param {string} props.layout - Layout style: 'inline' or 'grid' (default: 'inline')
 * @param {string} props.emptyMessage - Message to display when no tags
 */
export default function TagList({
  tags = [],
  onTagClick,
  onTagRemove,
  removable = false,
  clickable = false,
  size = "md",
  layout = "inline",
  emptyMessage = "No tags"
}) {
  if (!tags || tags.length === 0) {
    return (
      <div className="text-sm text-gray-500 italic">
        {emptyMessage}
      </div>
    );
  }

  const containerClasses = layout === "grid"
    ? "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2"
    : "flex flex-wrap gap-2";

  return (
    <div className={containerClasses}>
      {tags.map((tag) => (
        <TagBadge
          key={tag.id}
          tag={tag}
          onRemove={removable ? onTagRemove : undefined}
          onClick={clickable ? onTagClick : undefined}
          removable={removable}
          clickable={clickable}
          size={size}
        />
      ))}
    </div>
  );
}
