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

export const BoxContainer2 = () => {
  return (
    <>
      <div>
        <div className="section-header">
          <h3>매출/정산 현황</h3>
          <p>(전월 전체 매출/정산 대비 기준 )</p>
        </div>
        <div className="box-wrap two-sales">
          <h4>총 매출액</h4>
          <div className="today-sales mt-sty">
            <span className="won01">937,284,000원</span>
            <span className="per">↑ 43.6%</span>
            <a className="arrow">
              <img src={ IMAGE_ROOT + '/ico_arrow.svg' } alt="오늘 매출 바로가기" />
            </a>
          </div>
        </div>
        <div className="box-wrap two-sales">
          <h4>총 정산액</h4>
          <div className="today-sales mt-sty">
            <span className="won02">24,734,000원</span>
            <span className="per">↑ 26.8%</span>
            <a className="arrow">
              <img src={ IMAGE_ROOT + '/ico_arrow.svg' } alt="오늘 매출 바로가기" />
            </a>
          </div>
        </div>
      </div>
      <div>
        <div className="section-header">
          <h3>거래 인사이트</h3>
          <p>(최근 일주일 기준)</p>
        </div>
        <div className="box-wrap two-sales img-customer">
          <h4>평균 객단가</h4>
          <div className="two-account">
            <span>937,284,000원</span>
          </div>
        </div>
        <div className="box-wrap two-sales img-states">
          <h4>하루 평균 매출 및 건수</h4>
          <div className="two-account">
            <span>73,000,000원(1,800건)</span>
          </div>
        </div>
      </div>
      <div>
        <div className="box-wrap ranking">
          <h4>매출이 가장 높은 요일</h4>
          <ul>
            <li>
              <span className="ranking-num-01">1</span>
              <span>월요일 (354,342,000원)</span>
              <span className="last-per-01">30%</span>
            </li>
            <li>
              <span className="ranking-num-ot">2</span>
              <span>화요일 (63,983,000원)</span>
              <span className="last-per-ot">20%</span>
            </li>
            <li>
              <span className="ranking-num-ot">3</span>
              <span>수요일 (5,938,000원)</span>
              <span className="last-per-ot">10%</span>
            </li>
          </ul>
        </div>
        <div className="box-wrap ranking">
          <h4>매출이 가장 높은 시간</h4>
          <ul>
            <li>
              <span className="ranking-num-01">1</span>
              <span>18시 (5,342,000원)</span>
              <span className="last-per-01">30%</span>
            </li>
            <li>
              <span className="ranking-num-ot">2</span>
              <span>10시 (994,000원)</span>
              <span className="last-per-ot">20%</span>
            </li>
            <li>
              <span className="ranking-num-ot">3</span>
              <span>23시 (478,000원)</span>
              <span className="last-per-ot">10%</span>
            </li>
          </ul>
        </div>
        <div className="box-wrap ranking">
          <h4>가장 많이쓰인 결제 수단</h4>
          <ul>
            <li>
              <span className="ranking-num-01">1</span>
              <span>신용카드 (354,342,000원)</span>
              <span className="last-per-01">30%</span>
            </li>
            <li>
              <span className="ranking-num-ot">2</span>
              <span>가상계좌 (64,094,000원)</span>
              <span className="last-per-ot">20%</span>
            </li>
            <li>
              <span className="ranking-num-ot">3</span>
              <span>휴대폰 (478,000원)</span>
              <span className="last-per-ot">10%</span>
            </li>
          </ul>
        </div>
      </div>
    </>
  );
};
