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

export type Props = React.HTMLAttributes<HTMLDivElement> & {
  start?: React.ReactNode;
  startClassName?: string;
  end?: React.ReactNode;
  endClassName?: string;
  contentClassName?: string;
  wrapChildren?: boolean;
};

export const ListItemStart: React.FC<React.HTMLAttributes<HTMLDivElement>> = (
  props
) => (
  <div {...props} className={twMerge('shrink-0 basis-10', props.className)} />
);
export const ListItemMiddle: React.FC<React.HTMLAttributes<HTMLDivElement>> = (
  props
) => <div {...props} className={twMerge('grow', props.className)} />;
export const ListItemEnd: React.FC<React.HTMLAttributes<HTMLDivElement>> = (
  props
) => <div {...props} className={twMerge('shrink-0', props.className)} />;

const ListItem: React.FC<Props> = (props) => {
  const {
    startClassName: classNameStart,
    contentClassName: classNameMiddle,
    endClassName: classNameEnd,
    children: childrenMiddle,
    start: childrenStart,
    end: childrenEnd,
    className,
    wrapChildren = !!(childrenStart || childrenEnd),
    ...restProps
  } = props;

  return (
    <div
      className={twMerge(
        'flex flex-row items-center gap-2',
        'border-b px-6 py-4',
        'font-sans text-base font-normal',
        'border-border-secondary text-foreground-secondary',
        className
      )}
      {...restProps}
    >
      {wrapChildren ? (
        <>
          {childrenStart && (
            <ListItemStart className={classNameStart}>
              {childrenStart}
            </ListItemStart>
          )}
          {childrenMiddle && (
            <ListItemMiddle className={classNameMiddle}>
              {childrenMiddle}
            </ListItemMiddle>
          )}
          {childrenEnd && (
            <ListItemEnd className={classNameEnd}>{childrenEnd}</ListItemEnd>
          )}
        </>
      ) : (
        <>
          {childrenStart}
          {childrenMiddle}
          {childrenEnd}
        </>
      )}
    </div>
  );
};

export default ListItem;