<script lang="ts">
    import type { Issue } from "../../types";
    import { onMount } from "svelte";
    import { Chart, type ChartConfiguration } from "chart.js/auto";
    import html2canvas from "html2canvas";
    import GraficoNefasto from "../GraficoNefasto.svelte";
    import CurvaS from "../CurvaS.svelte";

    let { issues }: { issues: Issue[] } = $props();
</script>

<div class="container-fluid">
    <div class="accordion" id="graficoAccordion">
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button
                    class="accordion-button collapsed"
                    aria-expanded="false"
                    data-bs-toggle="collapse"
                    data-bs-target="#graficoCollapse"
                >
                    Gráfico de Índice de Control
                </button>
            </h2>
            <div id="graficoCollapse" class="accordion-collapse collapse">
                <div class="accordion-body">
                    <GraficoNefasto />
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button
                    class="accordion-button"
                    aria-expanded="true"
                    data-bs-toggle="collapse"
                    data-bs-target="#graficoCollapse2"
                >
                    Gráfico de Índice de Control
                </button>
            </h2>
            <div id="graficoCollapse2" class="accordion-collapse collapse show">
                <div class="accordion-body">
                    <CurvaS {issues} />
                </div>
            </div>
        </div>
    </div>
</div>
