import { ReactNode } from 'react';

import { cn } from '@/lib/helper';
import { Color } from '@/types/theme';

interface StepItemProps {
  children?: ReactNode;
  icon?: ReactNode;
  className?: string;
  color?: Color;
}

const StepItem = ({ children, icon, className, color }: StepItemProps) => {
  const stepItemBaseClassName = cn('step', {
    'step-primary': color === 'primary',
    'step-secondary': color === 'secondary',
    'step-accent': color === 'accent',
    'step-neutral': color === 'neutral',
    'step-info': color === 'info',
    'step-success': color === 'success',
    'step-warning': color === 'warning',
    'step-error': color === 'error',
  });

  return (
    <li className={cn(stepItemBaseClassName, className)}>
      <span
        className={cn('step-icon', {
          'transition-shadow shadow-[0_0_10px_2px_var(--color-warning)] hover:shadow-[0_0_15px_5px_var(--color-warning)]':
            color === 'warning',
        })}
      >
        {icon}
      </span>

      <div>{children}</div>
    </li>
  );
};

export default StepItem;