"use client";
import { tagGroupVariants } from '@heroui/styles';
import { useMemo, createContext, useContext } from 'react';
import { TagGroup, TagList } from 'react-aria-components';
import { composeTwRenderProps } from '../../utils/compose.js';
import { jsx } from 'react/jsx-runtime';

const TagGroupContext = /*#__PURE__*/createContext({});

/* -------------------------------------------------------------------------------------------------
 * TagGroup Root
 * -----------------------------------------------------------------------------------------------*/

const TagGroupRoot = ({
  children,
  className,
  size,
  variant,
  ...restProps
}) => {
  const slots = useMemo(() => tagGroupVariants(), []);
  return /*#__PURE__*/jsx(TagGroupContext, {
    value: {
      slots,
      size,
      variant
    },
    children: /*#__PURE__*/jsx(TagGroup, {
      className: slots.base({
        className
      }),
      "data-slot": "tag-group",
      ...restProps,
      children: children
    })
  });
};

/* -------------------------------------------------------------------------------------------------
 * TagGroup List
 * -----------------------------------------------------------------------------------------------*/

const TagGroupList = ({
  children,
  className,
  ...restProps
}) => {
  const {
    slots
  } = useContext(TagGroupContext);
  return /*#__PURE__*/jsx(TagList, {
    className: composeTwRenderProps(className, slots?.list()),
    "data-slot": "tag-group-list",
    ...restProps,
    children: children
  });
};

export { TagGroupContext, TagGroupList, TagGroupRoot };
