import React from 'react';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import styles from './index.less';

interface PanelTitleProps {
  title: string;
  moreText?: string;
  modalName?: string;
}

const PanelTitle: React.FC<PanelTitleProps> = ({ title, moreText, modalName }) => {
  const { dispatch } = useGlobalModalServices();

  const handleMoreClick = () => {
    if (modalName) {
      dispatch.push(modalName as any);
    }
  };

  return (
    <div className={styles.titleContainer}>
      <div className={styles.titleBackground}>
        <div className={styles.baseRectangle}></div>
        <div className={styles.topRectangle}></div>
      </div>
      
      <div className={styles.titleContent}>
        <div className={styles.titleText}>{title}</div>
        {/* <div className={styles.diamond}></div> */}
        <img 
          src={require('@/assets/images/V-2504/main-panel-diamond.png')} 
          className={styles.diamond} 
        />
      </div>
      
      {moreText && (
        <div className={styles.moreContainer} onClick={handleMoreClick}>
          <span className={styles.moreText}>{moreText}</span>
          <img 
            src={require('@/assets/images/V-2504/main-title-more.png')} 
            className={styles.moreIcon} 
            alt="more" 
          />
        </div>
      )}
    </div>
  );
};

export default PanelTitle; 