import { Stack } from '@mui/material';

import CopetinText from './components/CopetinText';
import DescriptionText from './components/DescriptionText';
import TitleText from './components/TitleText';
import { type TitleProps } from './types';
import { getJustifyContent, getTextAlign } from './utils';

export const Title = ({
  id,
  centered = false,
  right = false,
  copetin = '',
  copetinTooltip = '',
  description = '',
  descriptionTooltip = '',
  date = '',
  title,
  variant = 'M',
  withEllipsis,
  overflow = 'hidden',
  disabled = false,
  fontWeight = 'fontWeightSemiBold',
  sx = {},
  slotProps,
}: TitleProps) => {
  return (
    <Stack
      id={id}
      sx={{
        '& > .MuiStack-root': {
          width: '100%',
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: getJustifyContent(centered, right),
          textAlign: getTextAlign(centered, right),
          gap: 0.5,
        },
        ...sx,
      }}
    >
      <CopetinText
        copetin={copetin}
        copetinTooltip={copetinTooltip}
        variant={variant}
        withEllipsis={withEllipsis}
        overflow={overflow}
        {...slotProps?.copetin}
      />
      <TitleText
        title={title}
        disabled={disabled}
        fontWeight={fontWeight}
        variant={variant}
        withEllipsis={withEllipsis}
        overflow={overflow}
        {...slotProps?.title}
      />
      <DescriptionText
        description={description}
        descriptionTooltip={descriptionTooltip}
        date={date}
        variant={variant}
        withEllipsis={withEllipsis}
        overflow={overflow}
        {...slotProps?.description}
      />
    </Stack>
  );
};

export type { TitleProps };

export default Title;