import View from "@/components/View";
import drStill2 from "@/public/content/dr_still_2.jpg";
import Image from "next/image";
import ArtLink from "@/components/ArtLink";
import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
import LearnMoreLinkLight from "@/components/LearnMoreLinkLight";

const OsteoForDocs = () => {
  return (
    <View
      bg_color="bg-primary-500"
      txt_color="text-primary-100"
      id="osteofordocs"
      className="!min-h-0"
    >
      <div className="flex h-full flex-col items-center justify-around md:flex-row">
        <div className="basis-2/5 md:text-right">
          <h1>For Doctors:</h1>
          <div className="mb-10">
            <h2>View Dr. Feely's osteopathy resources</h2>
            <ArtLink
              href="/articles/feelys-osteopathic-dictionary"
              className="hover:drop-shadow-light"
            >
              Feely's Abridged Osteopathic Dictionary
            </ArtLink>
            <ArtLink
              href="/articles/omt-codes"
              className="hover:drop-shadow-light"
            >
              OMT Codes
            </ArtLink>
            <ArtLink
              href="/content/doctor-resources/drg_omt_chart.pdf"
              target="_blank"
              className="hover:drop-shadow-light"
            >
              DRG/OMT Chart [PDF]{" "}
              <ArrowTopRightOnSquareIcon className="inline w-[16px] align-[-2px]" />
            </ArtLink>
          </div>
          <div>
            <h2>Or, learn more by reading his articles</h2>
            <LearnMoreLinkLight href="/articles#artsfordocs">
              View all articles for doctors
            </LearnMoreLinkLight>
          </div>
        </div>
        <div className="basis-2/5">
          <Image
            src={drStill2}
            alt="Image of Dr. A.T. Still"
            className="mx-auto my-10 block w-11/12 rounded-lg drop-shadow-2xl"
          />
        </div>
      </div>
    </View>
  );
};

export default OsteoForDocs;