import View from "@/components/View";
import BoardCerts from "./components/BoardCerts";
import Fellowships from "./components/Fellowships";
import Awards from "./components/Awards";
import headshot from "@/public/content/dr_feely_headshot2.png";
import Image from "next/image";

const CertsAndFellows = () => {
  return (
    <View
      bg_color="bg-primary-300"
      txt_color="text-primary-500"
      id="certsandfellows"
    >
      <h1>Accolades & Awards</h1>
      <div className="mb-10 flex flex-col gap-10 md:flex-row">
        <div className="md:basis-1/2">
          <Fellowships className="" />
        </div>
        <div className="flex items-center justify-center md:basis-1/2">
          <Image
            src={headshot}
            alt="Picture of Dr. feely"
            className="w-5/6 self-center rounded-lg drop-shadow-2xl lg:w-3/5"
          />
        </div>
      </div>
      <div className="flex flex-col gap-10 md:flex-row">
        <div className="md:basis-1/2">
          <BoardCerts />
        </div>
        <div className="md:basis-1/2">
          <Awards />
        </div>
      </div>
    </View>
  );
};

export default CertsAndFellows;