import styled from '@emotion/styled';
import { observer } from 'mobx-react-lite';
import { ReactNode } from 'react';

import { Option } from '@/app/(root)/create/createV2/componentsQ3/AnimatedTabs';

import BaseLayout from './BaseLayout';
import StudioObjectHeader from './StudioObjectHeader';

const StudioObjectContent = styled.div<{ noPadding?: boolean }>`
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  padding: ${({ noPadding }) => (noPadding ? '0' : '12px')};
`;

// Studio object layout that includes header and content structure
export default observer(function StudioObjectLayout<T extends string>({
  children,
  onCollapse,
  closable = true,
  border = false,
  tabOptions,
  activeTab,
  onTabChange,
  titleRow,
}: {
  children: ReactNode;
  onCollapse?: () => void;
  closable?: boolean;
  border?: boolean;
  tabOptions?: Option<T>[];
  activeTab?: T;
  onTabChange?: (option: Option<T>) => void;
  titleRow?: ReactNode;
}) {
  const header =
    tabOptions && activeTab && onTabChange ? (
      <StudioObjectHeader
        tabOptions={tabOptions}
        activeTab={activeTab}
        onTabChange={onTabChange}
      />
    ) : undefined;

  return (
    <BaseLayout
      onCollapse={onCollapse}
      closable={closable}
      border={border}
      header={header}
      tightMargin
    >
      {titleRow}
      <StudioObjectContent noPadding={!!titleRow}>
        {children}
      </StudioObjectContent>
    </BaseLayout>
  );
});