import { Container } from '@cleartrip/ct-design-container';
import { makeStyles } from '@cleartrip/ct-design-style-manager';

import type { IDialogContentProps } from '../type';

/**
 * Static slot applied to the DialogContent root. Mirrors aldenui's
 * `theme.spacing[6]` padding + centered flex alignment so migrated
 * call sites render identically.
 */
const staticStyles = makeStyles((theme) => ({
  root: {
    padding: theme.spacing[6],
    justifyContent: 'center',
    alignItems: 'center',
  },
}));

/**
 * Top content slot rendered inside a Dialog body.
 *
 * Migrated from aldenui (`core/components/components/Dialog/DialogContent`)
 * per Migration.MD — swaps the previous `css`/`useTheme` pattern for
 * `Container` + composed `styleConfig.root` slots so consumers can
 * layer style arrays on top of the default padding/alignment without
 * the styled-components detour.
 */
const DialogContent = ({ headIcon, title, description, styleConfig }: IDialogContentProps) => {
  const { root: customStyles = [] } = styleConfig || {};

  return (
    <Container styleConfig={{ root: [staticStyles.root, ...customStyles] }}>
      {headIcon}
      {title}
      {description}
    </Container>
  );
};

DialogContent.displayName = 'DialogContent';

export default DialogContent;