import { cn } from '@qwik-ui/utils';
import { type PropsOf, component$ } from '@builder.io/qwik';
import { Progress as HeadlessProgress } from '@qwik-ui/headless';

export const Progress = component$<PropsOf<typeof HeadlessProgress.Root>>((props) => {
  return (
    <HeadlessProgress.Root
      class={cn(
        'relative h-4 w-full overflow-hidden rounded-sm border bg-muted',
        props.class,
      )}
      {...props}
    >
      <HeadlessProgress.Indicator class="h-full w-full flex-1 bg-primary transition-all" />
    </HeadlessProgress.Root>
  );
});