/**
 * TradeAlertModal 스타일 MUI Dialog 타이틀 (배지 + EN/KO 제목)
 */
import React from 'react';
import { Box, DialogTitle, IconButton, Typography } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import { goldenPopupBadgeSx, goldenPopupDialogTitleSx } from '../utils/goldenPopupStyles';

interface Props {
  badge?: string;
  title: React.ReactNode;
  titleKo?: React.ReactNode;
  onClose?: () => void;
  extra?: React.ReactNode;
}

const GoldenPopupDialogTitle: React.FC<Props> = ({ badge, title, titleKo, onClose, extra }) => (
  <DialogTitle sx={goldenPopupDialogTitleSx} component="div">
    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flex: 1, minWidth: 0 }}>
      {badge ? <Box component="span" sx={goldenPopupBadgeSx}>{badge}</Box> : null}
      <Typography component="span" sx={{ fontSize: 'inherit', fontWeight: 'inherit', minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
        {title}
        {titleKo ? (
          <Typography component="span" sx={{ fontSize: '12px', fontWeight: 400, color: '#9aa5ce', ml: 0.5 }}>
            ({titleKo})
          </Typography>
        ) : null}
      </Typography>
    </Box>
    {extra}
    {onClose ? (
      <IconButton size="small" onClick={onClose} sx={{ color: '#6272a4', '&:hover': { color: '#c0caf5', bgcolor: 'rgba(255,255,255,0.07)' } }}>
        <CloseIcon fontSize="small" />
      </IconButton>
    ) : null}
  </DialogTitle>
);

export default GoldenPopupDialogTitle;
