next-web/src/components/FindProvider.tsx

"use client";

import classnames from 'classnames';
import Button from '@/components/Button';

import { MdLocationOn } from "react-icons/md";
import LocationSearchInput from '@/components/LocationSearchInput';

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

interface FindProviderProps {
  zipOnly?: boolean;
}

const FindProvider: React.FC<FindProviderProps> = ({ zipOnly }) => {
    
  return (
    <div className="2xl:min-w-[48vw] xl:min-w-[45vw] flex z-1">
        <div className="w-full flex flex-col px-4 py-3 border border-6 border-bluemana rounded-4xl">
            <div className="w-full pb-2 flex justify-center text-2xl text-bronze font-semibold">
                <p>Find A Provider By...</p>
            </div>
            <div className="w-full flex px-2">
                <div className="w-full flex border-x-2 border-t-2 rounded-t-xl font-semibold divide-x-2 divide-bronze">
                    <a href="#" className="w-full h-9 flex justify-center items-center rounded-tl-lg bg-bluetang text-platinum">
                        Location
                    </a>
                    <a href="#" className="w-full h-9 flex justify-center items-center text-platinum hover:text-bronze">
                        Procedure
                    </a>
                    <a href="#" className="w-full h-9 flex justify-center items-center rounded-tr-lg text-platinum hover:text-bronze">
                        Provider/Facility
                    </a>
                </div>
            </div>
            <div className={classnames("w-full flex items-start px-2 pb-2 text-xl", font.className)}>
                {/* <p className='pr-3'><GrMapLocation size={30} /></p> */}
                <Button className="h-10 text-deepcove hover:text-atmosphere bg-platinum rounded-bl-xl">
                    <MdLocationOn size={30} />
                </Button>
                <LocationSearchInput className="h-10 pl-3 text-bluemana border-y-2 border-platinum" />
                <Button className="h-10 pr-3 pl-2 bg-platinum hover:bg-bluemana text-center text-deepcove font-semibold rounded-br-xl border-y-2 border-r-2 border-platinum">
                    Search
                </Button>
            </div>
            <div className="w-full flex justify-end text-platinum font-semibold">
                <Button className="mr-2 underline hover:text-bronze">
                    View Full Provider List
                </Button>
            </div>
        </div>
    </div>
  );
};

export default FindProvider;