"use client";

import classnames from 'classnames';
import Button from '@/components/Button';
import { FaRegIdCard } from "react-icons/fa";

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

const InsuranceCardWidget = () => {
    
  return (
    <div className="2xl:min-w-[16vw] xl:min-w-[15vw] flex flex-col justify-center items-center px-4 py-3 text-xl border border-6 border-atmosphere rounded-4xl z-1">
        <div className="text-deepcove -mb-11 z-3 font-semibold">My Card</div>
        <FaRegIdCard size={150} className="text-bluemana" />
        <div className={classnames("w-full 2xl:min-w-[9vw] xl:min-w-[11vw] flex justify-between items-center space-x-1", font.className)}>
            <Button className="hover:text-bronze">
                View
            </Button>
            <p>|</p>
            <Button className="hover:text-bronze">
                Download
            </Button>
        </div>
    </div>
  );
};

export default InsuranceCardWidget;