---
import { Icon } from "astro-icon/components";

type Props = {
  institution: String;
  qualification: String;
  grades: Array<String>;
  isOpen?: boolean;
};

const { institution, qualification, grades, isOpen = false } = Astro.props;
---

<div class="grid">
  <details open={isOpen === true ? "open" : null} class="group">
    <summary
      class="flex cursor-pointer items-center justify-between py-3 font-bold"
    >
      <p
        class="text-tertiary group-hover:text-secondary group-open:text-secondary group-open:group-hover:text-tertiary m-0 font-semibold text-balance transition-colors"
      >
        {qualification}
      </p>
      <span class="transition group-open:rotate-180">
        <Icon
          name="mdi:chevron-down"
          class="text-tertiary group-open:text-secondary group-hover:text-secondary group-open:group-hover:text-tertiary h-6 w-auto transition-colors"
        />
      </span>
    </summary>
    <div class="p-4">
      <p class="text-tertiary my-0 mb-2 font-semibold">
        {institution}
      </p>
      <ol class="list-inside list-disc">
        {grades.map((grade) => <li class="text-tertiary">{grade}</li>)}
      </ol>
    </div>
  </details>
</div>
