import React from "react";
import { createRocket } from "../_util/create-rocket";
import { useConfig } from "../_util/config-context";

export const SegmentGroup = createRocket("Group", "div.@{prefix}-region-pave");
export function SegmentGroupItem({
  name,
  children,
}: {
  name: React.ReactNode;
  children: React.ReactNode;
}) {
  const { classPrefix } = useConfig();
  return (
    <div className={`${classPrefix}-region-pave__item`}>
      <span className={`${classPrefix}-region-pave__area-name`}>
        <i>{name}</i>
      </span>
      {children}
    </div>
  );
}

SegmentGroupItem.displayName = "SegmentGroupItem";