<template>
  <div :class="`${prefixCls} ${inset ? prefixCls + '__inset' : ''}`">
    <slot name="title">
      <div :class="`${prefixCls}__title text-body-m`">
        {{ title }}
      </div>
    </slot>
    <slot name="default"></slot>
  </div>
</template>

<script setup lang="ts" name="CellGroup">
import { useDesign } from "@/hooks/useDesign";

const { prefixCls } = useDesign("cell-group");
// import { defineComponent, type ExtractPropTypes } from 'vue';
// import { truthProp, createNamespace, BORDER_TOP_BOTTOM } from '../utils';

// const [name, bem] = createNamespace('cell-group');

// export const cellGroupProps = {
//   title: String,
//   inset: Boolean,
//   border: truthProp,
// };

// export type CellGroupProps = ExtractPropTypes<typeof cellGroupProps>;

// export default defineComponent({
// name,

// inheritAttrs: false,

// props: cellGroupProps,

const props = defineProps({
  title: String,
  inset: Boolean
  // border: truthProp,
});

// // setup(props, { slots, attrs }) {
//   const renderGroup = () => (
//     <div
//       class={[
//         bem({ inset: props.inset }),
//         { [BORDER_TOP_BOTTOM]: props.border && !props.inset },
//       ]}
//       {...attrs}
//     >
//       {slots.default?.()}
//     </div>
//   );

//   const renderTitle = () => (
//     <div class={bem('title', { inset: props.inset })}>
//       {slots.title ? slots.title() : props.title}
//     </div>
//   );

//   const RenderCellGroup = () => {
//     if (props.title || slots.title) {
//       return (
//         <>
//           {renderTitle()}
//           {renderGroup()}
//         </>
//       );
//     }

//     return renderGroup();
//   };
// },
// });
</script>

<style lang="scss" scoped>
$prefix-cls: "#{$namespace}-cell-group";

.#{$prefix-cls} {
  // background: var(--van-cell-group-background);

  &.#{$prefix-cls}__inset {
    margin: $space-a2;
    // border-radius: var(--van-cell-group-inset-radius);
    overflow: hidden;
  }

  &__title {
    padding: $space-a2 $space-b2 $space-b2;
    color: $color-text-disable;
    // font-size: var(--van-cell-group-title-font-size);
    // line-height: var(--van-cell-group-title-line-height);
  }
  &__inset {
    .#{$prefix-cls}__title {
      padding: $space-a2 0;
    }
  }
}
</style>
