"use client";

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

import Button from '@/components/Button';

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

interface DeductableProgressWidgetProps {
}

const DeductableProgressWidget = () => {
    
  return (
    <div className="w-full lg:h-full flex flex-col justify-center items-center text-xl border border-6 border-bluetang rounded-4xl z-1">
        <div className="2xl:min-w-[32vw] xl:w-[27vw] lg:w-[27vw] md:w-[27vw] flex flex-col justify-center items-center p-2">
            <div className="text-2xl">Deductable Progress</div>
            <DashboardPieChart paid={1007.23} remaining={492.77} />
            <div className={classnames("w-full flex font-semibold text-center", font.className)}>
              <div className="w-[50vw] text-[#32CD32]">Paid</div>
              <div className="w-[50vw]">Remaining</div>
            </div>
            <div className={classnames("w-full flex justify-end text-platinum font-semibold text-base")}>
              <Button className="pr-4 underline hover:text-bronze">
                  View Details
              </Button>
            </div>
        </div>
    </div>
  );
};

export default DeductableProgressWidget;