import { IMAGE_ROOT } from '@/shared/constants/common';

export const BoxContainer1 = () => {
  return (
    <>
      <div className="box-wrap">
        <h3>오늘 매출</h3>
        <div className="today-sales">
          <span className="won01">937,284,000원</span>
          <span className="per">↑ 43.6%</span>
          <a href="#" className="arrow">
            <img src={ IMAGE_ROOT + '/ico_arrow.svg' } alt="오늘 매출 바로가기" />
          </a>
        </div>
        <ul className="dales-detail">
          <li className="approve">승인 건수 <strong>8,277건</strong></li>
          <li className="cancel">취소 건수 <strong>320건</strong></li>
        </ul>
      </div>
      <div className="box-wrap">
        <h3>오늘 정산</h3>
        <div className="today-sales">
          <span className="won02">24,734,000원</span>
          <span className="per">입금완료</span>
          <a href="#" className="arrow">
            <img src={ IMAGE_ROOT + '/ico_arrow.svg' } alt="오늘 매출 바로가기" />
          </a>
        </div>
        <div className="progressbar">
          <div className="progress-header">
            <span className="progress-title">정산한도</span>
            <span className="progress-remaining">23% 남음</span>
          </div>
          <div className="progress-container">
            <div className="progress-bar">
              <div className="progress-fill" style={{width: '77%'}}></div>
            </div>
          </div>
          <div className="remain-limit">잔여정산한도  <strong>7,833,000원</strong></div>
        </div>
      </div>
    </>
  );
};
