'use client';

import React from 'react';
import { twMerge } from 'tailwind-merge';

export type Props = React.HTMLAttributes<HTMLUListElement> & {
  itemClassName?: string;
  separatorClassName?: string;
};

const DiscoverCardActions: React.FC<Props> = (props) => {
  const {
    className,
    itemClassName: explicitItemClassName,
    separatorClassName,
    children,
    ...restProps
  } = props;

  const itemClassName = twMerge(
    'flex flex-row items-center justify-start',
    'first:before:hidden',
    explicitItemClassName
  );

  return (
    <ul className={twMerge('flex flex-row', className)} {...restProps}>
      {React.Children.map(
        children,
        (child, i) =>
          child && (
            <li key={i} className={itemClassName}>
              {child}
            </li>
          )
      )}
    </ul>
  );
};

export default DiscoverCardActions;