import { Schibsted_Grotesk } from 'next/font/google'
import classnames from 'classnames';
import InlineLink from "@/components/InlineLink";

const font = Schibsted_Grotesk({ subsets: ['latin'] })

export interface QuickLink {
  display: string;
  url: string;
}

interface QuickAccessLinksProps {
  imageUrl: string;
  quickLinks: QuickLink[];
  
}

const QuickAccessLinks: React.FC<QuickAccessLinksProps> = ({ imageUrl, quickLinks }) => {

    
  return (
     <div className="relative w-full flex justify-start pl-10 py-5">
        <div className="absolute flex flex-col justify-center left-0 bottom-0 w-full h-full">
            <div className={classnames("relative h-80 w-full rounded-r-2xl rounded-out-lt-3xl rounded-out-lb-3xl border-r-2 bg-bluetang border-atmosphere")} />
        </div>
        <div className={classnames("w-3/5 flex flex-col justify-center text-platinum z-2")}>
            <div className={classnames("text-4xl pb-8")}>
                Quick Access to Your Services
            </div>
            <ul className={classnames("flex flex-col pl-10 text-2xl leading-12 list-disc list-inside", font.className)}>
                {quickLinks.map((quickLink, i) => (
                  <li key={i} ><InlineLink link={quickLink.url}>{quickLink.display}</InlineLink></li>
                ))}
            </ul>
        </div>
        <div className={classnames("w-2/5 flex justify-center mr-10 rounded-2xl z-2 bg-atmosphere")}>
            <div className={classnames(
                "relative w-9/10"
            )}>
                <img src={imageUrl} alt="Description" className="grayscale rounded-2xl bg-cover bg-center" />
                <div className="after:absolute after:inset-0 after:bg-bluetang after:mix-blend-color after:rounded-2xl" />
            </div>
        </div>
    </div>
  );
};

export default QuickAccessLinks;