import clsx from 'clsx';

export type DescriptionsItemProps = {
  title: React.ReactNode;
  content: React.ReactNode;
  span?: number | 'filled';
  isFirstRow?: boolean;
  titleWidth?: number;
  titleClassName?: string;
  contentClassName?: string;
};

export const DescriptionsItem = (props: DescriptionsItemProps) => {
  const { title, content, span, isFirstRow = false, titleWidth, titleClassName, contentClassName } = props;

  const gridColumnStyle =
    span === 'filled' ? { gridColumn: '1 / -1' } : span && span > 0 ? { gridColumn: `span ${span}` } : {};

  return (
    <div className="flex" style={gridColumnStyle}>
      <div
        className={`flex w-25 min-h-10 items-center px-4 bg-primary-tertiary01 text-primary-secondary text-sm font-semibold border-b border-white ${titleClassName || ''}`}
        style={{ width: titleWidth }}
      >
        {title}
      </div>
      <div
        className={clsx(
          'relative flex flex-1 items-center pl-4 pr-3 py-2 text-sm font-medium text-dabeeo-black-22 overflow-x-auto after:content-[\'\'] after:absolute after:left-0 after:right-0 after:bottom-0 after:h-px after:bg-primary-tertiary01',
          contentClassName,
          isFirstRow &&
          'before:content-[\'\'] before:absolute before:left-0 before:right-0 before:top-0 before:h-px before:bg-primary-tertiary01'
        )}
      >
        {content}
      </div>
    </div>
  );
};