/** TradeAlertModal(tam-) 기준 MUI Dialog 공통 스타일 — frontend_golden */
export const GOLDEN_POPUP_ACCENT = '#3f7ef5';
export const GOLDEN_POPUP_ACCENT_GLOW = 'rgba(63,126,245,0.22)';

export const goldenPopupDialogPaperSx = {
  borderRadius: '12px',
  border: `1px solid ${GOLDEN_POPUP_ACCENT}40`,
  background: '#1e222d',
  backgroundImage: 'none',
  boxShadow: `0 0 0 1px ${GOLDEN_POPUP_ACCENT_GLOW}, 0 20px 60px rgba(0,0,0,0.65), 0 0 40px ${GOLDEN_POPUP_ACCENT_GLOW}`,
  overflow: 'hidden',
  maxWidth: '96vw',
  maxHeight: '90vh',
} as const;

export const goldenPopupDialogTitleSx = {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  gap: 1,
  py: 1.25,
  px: 1.75,
  cursor: 'grab',
  userSelect: 'none',
  background: `linear-gradient(180deg, rgba(63,126,245,0.14) 0%, rgba(63,126,245,0.04) 28px, #1f2335 100%)`,
  borderBottom: '1px solid rgba(122,162,247,0.12)',
  color: '#c0caf5',
  fontSize: '14px',
  fontWeight: 700,
  letterSpacing: '0.4px',
  '&:active': { cursor: 'grabbing' },
} as const;

export const goldenPopupDialogContentSx = {
  px: 1.75,
  py: 1.5,
  bgcolor: '#1e222d',
  color: '#c0caf5',
} as const;

export const goldenPopupDialogActionsSx = {
  px: 1.75,
  py: 1.25,
  bgcolor: '#1e222d',
  borderTop: '1px solid rgba(122,162,247,0.1)',
} as const;

export const goldenPopupBadgeSx = {
  display: 'inline-block',
  px: 1.25,
  py: 0.35,
  borderRadius: '20px',
  fontSize: '11px',
  fontWeight: 800,
  color: '#fff',
  letterSpacing: '1.2px',
  bgcolor: GOLDEN_POPUP_ACCENT,
  flexShrink: 0,
} as const;

/** Dialog 공통 props (드래그 Paper + tam 스타일) */
export function goldenPopupDialogProps(width = 400) {
  return {
    hideBackdrop: true,
    PaperProps: {
      sx: {
        ...goldenPopupDialogPaperSx,
        width,
        m: 0,
      },
    },
  } as const;
}
