import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmSeparator } from '@spartan-ng/helm/separator';
import { classes } from '@spartan-ng/helm/utils';

@Component({
  selector: 'hlm-field-separator',
  imports: [HlmSeparator],
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    'data-slot': 'field-separator',
  },
  template: `
    <hlm-separator class="absolute inset-0 top-1/2" />
    <span
      class="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
      data-slot="field-separator-content"
    >
      <ng-content />
    </span>
  `,
})
export class HlmFieldSeparator {
  constructor() {
    classes(() => 'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2');
  }
}
