"use client";
import { DrawingPinFilledIcon, EnterIcon } from "@radix-ui/react-icons";
import { User } from "@repo/db";
import ModalBtn from "./modalBtn";

export const KursItem = ({
  user,
  title,
  type,
  beschreibung,
  badge,
  moodleReq,
}: {
  user: User;
  title: string;
  type: string;
  beschreibung: string;
  badge: string;
  moodleReq: boolean;
}) => {
  return (
    <div className="col-span-full">
      <div className="card bg-base-200 shadow-xl mb-4">
        <div className="card-body">
          <h2 className="card-title">{title}</h2>
          <div className="absolute top-0 right-0 m-4">
            <span className="badge badge-info badge-outline">
              Zusatzqualifikation
            </span>
          </div>
          <div className="grid grid-cols-6 gap-4">
            <div className="col-span-4">
              <p className="text-left text-balance">{beschreibung}</p>
            </div>
            <div className="col-span-2">{badge}</div>
          </div>
          <div className="card-actions flex justify-between items-center mt-5">
            <p className="text-gray-600 text-left flex items-center gap-2">
              <DrawingPinFilledIcon /> <b>Teilnahmevoraussetzungen:</b>
              <a className="link link-info" href="">
                Moodle Kurs /MOODLEKURSTITLE\
              </a>
            </p>
            <ModalBtn
              title={title}
              dates={["Dienstag, 25 Februar 2025", "Mittwoch, 26 Februar 2025"]}
              modalId={title + "_modal" + Math.random()}
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export const PilotKurs = ({ user }: { user: User }) => {
  {
    /* STATISCH, DA FÜR ALLE NEUEN MITGLIEDER MANDATORY, WIRD AUSGEBLENDET WENN ABSOLVIERT */
  }
  return (
    <div className="col-span-full">
      <div className="card card-bordered border-secondary bg-base-200 shadow-xl mb-4">
        <div className="card-body">
          <h2 className="card-title">Einsteigerkurs für Piloten</h2>
          <div className="absolute top-0 right-0 m-4">
            <span className="badge badge-secondary badge-outline">
              Verpflichtend
            </span>
          </div>
          <div className="grid grid-cols-6 gap-4">
            <div className="col-span-4">
              <p className="text-left text-balance">
                In diesem Kurs lernen Piloten die Grundlagen der Luftrettung,
                Einsatzverfahren, den Umgang mit dem BOS-Funk und einige
                medizinische Basics. Der Kurs bietet eine ideale Vorbereitung
                für alle Standard Operations bei Virtual Air Rescue.
              </p>
            </div>
            <div className="col-span-2">Badge</div>
          </div>
          <div className="card-actions flex justify-between items-center mt-5">
            <p className="text-gray-600 text-left flex items-center gap-2">
              <DrawingPinFilledIcon /> <b>Teilnahmevoraussetzungen:</b> Keine
            </p>
            <button className="btn btn-outline btn-secondary btn-wide">
              <EnterIcon /> Zum Moodle Kurs
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};