import { ReactNode } from 'react';
import { cn } from '@/lib/helper';

interface StepsProps {
  children?: ReactNode;
  className?: string;
  direction?: 'horizontal' | 'vertical';
}

const Steps = ({ children, className, direction }: StepsProps) => {
  const stepsBaseClassName = cn('steps gap-2', {
    'steps-horizontal': direction === 'horizontal',
    'steps-vertical': direction === 'vertical',
  });

  return (
    <ul className={cn(stepsBaseClassName, 'overflow-visible!', className)}>
      {children}
    </ul>
  );
};

export default Steps;