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'>Ringkasan Pesanan</div>

      <div className="h-6" />

      <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} />

        <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>
      </div>
    </>
  )
}

export default CartSummary