import React from 'react';
import { Nullable } from 'tsdef';
import { SRow } from '../../s-components/layout/s-row';
import { SH2 } from '../../s-components/typography/s-h2';

type TProps = {
  title?: string;
  renderTitle?: () => Nullable<React.ReactElement>;
  // zIndex?: number;
  // px?: number;
  // mb?: number;
  // mt?: number;
};

export const TracklistTitle: React.FC<TProps> = props => {
  const { title, renderTitle, ...rest } = props;
  return (
    <SRow {...rest} alignItems="center">
      {renderTitle ? renderTitle() : <SH2 mr={5}>{title}</SH2>}
    </SRow>
  );
};

TracklistTitle.defaultProps = {
  // medium: false,
};