"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] w-full h-full flex lg:flex-col justify-center items-center text-xl space-x-10 lg:space-x-0 border border-6 border-atmosphere rounded-4xl z-1">
        <div className="flex flex-col justify-end items-center">
          <div className="z-3 flex items-end">
            <div className="text-deepcove -mb-11 font-semibold">My Card</div>
          </div>
          <FaRegIdCard size={150} className="text-bluemana" />
        </div>
        <div className={classnames("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;