next-web/src/components/DeductableProgressWidget.tsx

"use client";

import React, { useState } from 'react';
import classnames from 'classnames';
import DashboardPieChart from '@/components/DashboardPieChart';

import { Schibsted_Grotesk } from 'next/font/google'
const font = Schibsted_Grotesk({ subsets: ['latin'] })

interface DeductableProgressWidgetProps {
}

const DeductableProgressWidget = () => {
    
  return (
    <div className="2xl:min-w-[32vw] xl:min-w-[30vw] min-w-[50vw] flex flex-col justify-center items-center text-xl border border-6 border-bluetang rounded-4xl z-1">
        <div className="flex justify-between items-end px-4">
            <p className={classnames("pb-18 text-[#32CD32] font-semibold", font.className)}>Paid</p>
            <div className="flex flex-col items-center">
                <DashboardPieChart paid={1007.23} remaining={492.77} />
                <p className="text-2xl">Deductable Progress</p>
            </div>
            <p className={classnames("pb-18 font-semibold", font.className)}>Remaining</p>
        </div>
    </div>
  );
};

export default DeductableProgressWidget;