import { Box, Text } from '@wix/design-system';
import React, { ReactNode } from 'react';

export interface MainCellLayoutProps {
  dataHook?: string;
  image?: ReactNode;
  dragHandle?: ReactNode;
  expandCollapseButton?: ReactNode;
  breadcrumbs?: ReactNode;
  title?: ReactNode;
  subtitle?: string;
  titleMaxWidth?: string;
}

export function MainCellLayout(props: MainCellLayoutProps) {
  const {
    dataHook,
    image,
    breadcrumbs,
    dragHandle,
    expandCollapseButton,
    title,
    subtitle,
    titleMaxWidth,
  } = props;
  return (
    <Box
      direction="horizontal"
      verticalAlign="middle"
      dataHook={dataHook}
      minWidth={0}
    >
      {dragHandle}
      {expandCollapseButton}
      {image && (
        <Box
          height="40px"
          paddingInlineEnd="12px"
          dataHook="image"
          flexShrink={0}
        >
          {image}
        </Box>
      )}
      <Box direction="vertical" minWidth={0} minHeight={0}>
        <Box direction="horizontal" minWidth={0}>
          {breadcrumbs}
          <Box
            flexShrink={titleMaxWidth != null ? 0 : undefined}
            minWidth={0}
            maxWidth={titleMaxWidth}
          >
            <Text ellipsis size="small" weight="normal" dataHook="title">
              {title}
            </Text>
          </Box>
        </Box>

        {subtitle && (
          <Text ellipsis size="tiny" secondary light dataHook="subtitle">
            {subtitle}
          </Text>
        )}
      </Box>
    </Box>
  );
}