import style from '../styles/summary.module.css';

import React from 'react';
import formatCurrency from '~/libs/formatCurrency';
import clsxm from '~/libs/clsxm';
import { Skeleton } from '@chakra-ui/react';
import _ from 'lodash';

type Props = {
  total?: number;
  discount?: number;
  subtotal?: number;
  tax?: number;
  shipping?: number;
  grandTotal?: number;
  isLoaded: boolean;
};

const CartSummary = ({
  total,
  discount,
  subtotal,
  tax,
  shipping,
  grandTotal,
  isLoaded = false,
}: Props) => {
  return (
    <>
      <div className='text-h-sm font-medium hidden md:block'>
        Ringkasan Pesanan
      </div>

      <div className='h-6' />

      <div className='hidden md:block'>
        <div className='flex flex-col gap-y-3'>
          <Skeleton isLoaded={isLoaded} className={style.line}>
            <span className={style.label}>Total Belanja</span>
            <span className={style.value}>
              Rp {formatCurrency(subtotal || 0)}
            </span>
          </Skeleton>

          <Skeleton isLoaded={isLoaded} className={style.line}>
            <span className={style.label}>Total Diskon</span>
            <span className={clsxm(style.value, style.discount)}>
              - Rp {formatCurrency(discount || 0)}
            </span>
          </Skeleton>

          <div className={style.divider} />

          <Skeleton isLoaded={isLoaded} className={style.line}>
            <span className={style.label}>Subtotal</span>
            <span className={style.value}>Rp {formatCurrency(total || 0)}</span>
          </Skeleton>

          <Skeleton isLoaded={isLoaded} className={style.line}>
            <span className={style.label}>Tax 11%</span>
            <span className={style.value}>Rp {formatCurrency(tax || 0)}</span>
          </Skeleton>

          <Skeleton isLoaded={isLoaded} className={style.line}>
            <span className={style.label}>Biaya Kirim</span>
            <span className={style.value}>
              Rp {formatCurrency(shipping || 0)}
            </span>
          </Skeleton>

          <div className={style.divider} />
        </div>
      </div>

      <Skeleton isLoaded={isLoaded} className={style.line}>
        <span className={clsxm(style.label, style.grandTotal)}>
          Grand Total
        </span>
        <span className={style.value}>
          Rp {formatCurrency(grandTotal || 0)}
        </span>
      </Skeleton>
    </>
  );
};

export default CartSummary;