"use client";

import classnames from 'classnames';

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

interface BenefitsAAGWidgetProps {
}

const BenefitsAAGWidget = () => {
    
  return (
    <div className="2xl:min-w-[32vw] xl:min-w-[30vw] w-full flex flex-col justify-start items-center px-4 py-3 text-xl border border-6 border-platinum rounded-4xl">
        <p className="text-3xl underline py-2">Benefits At A Glance</p>
        <p className={classnames("text-2xl font-semibold py-2", font.className)}>CLASSIC 5K 100/5000</p>
        <div className={classnames("w-full flex justify-between", font.className)}>
            <div className="flex flex-col">
                <p>Physician Visit</p>
                <p>Specialist Visit</p>
                <p>Urgent Care</p>
                <p>INN-Ind Ded</p>
                <p>INN-Family Ded</p>
                <p>OON-Ind Ded</p>
                <p>OON-Family Ded</p>
                <p>Co-Insurance</p>
                <p>INN-Ind OOP</p>
                <p>INN-Family OOP</p>
                <p>OON-Ind OOP</p>
                <p>OON-Family OOP</p>
                <p>Emergency Room</p>
                <p>Preventive Care</p>
            </div>
            <div className="flex flex-col">
                <p>$25.00</p>
                <p>$50.00</p>
                <p>$50.00</p>
                <p>$5,000</p>
                <p>$10,000</p>
                <p>$10,000</p>
                <p>$20,000</p>
                <p>100%/0%</p>
                <p>$5,000</p>
                <p>$10,000</p>
                <p>$10,000</p>
                <p>$20,000</p>
                <p>Ded & Coin</p> 
                <p>100%</p>
            </div>
        </div>
    </div>
  );
};

export default BenefitsAAGWidget;