---
import ExperienceLayout from '@layouts/ExperienceLayout.astro';
import Timeline from '@components/Timeline.astro';
import Carousel from "@components/CustomCarousel.astro";

import spring_2019_interns from "@assets/experience/spacex/avionics-test-engineering-internship/spring-2019-interns.jpg";

import type {carouselGroup} from "@interfaces/image-carousel.ts";
import type {timelineEntry} from "@interfaces/timeline.ts";

const headerCarouselGroup: carouselGroup = {
    animation: "slide",
    images: [
        spring_2019_interns
    ]
}

const timeline: timelineEntry[] = [
    {
        event: "Started",
        date: "January 2019",
    },
    {
        event: "Finished",
        date: "March 2019",
    }
];
---
<ExperienceLayout title="SpaceX - Avionics Test Engineering Internship">
    <!-- FIXME: Image bounds are all messed up -->
    <Carousel carouselGroup={headerCarouselGroup}/>

    <h2 class="font-bold md:text-2xl my-4">Summary</h2>
    <h3 class="font-bold md:text-lg my-4">Timeline</h3>
    <Timeline timeline={timeline}/>
    <h3 class="font-bold md:text-lg my-4">Key Takeaways</h3>
    <ul class="list-disc list-inside">
        <li></li>
    </ul>
    <h3 class="font-bold md:text-lg my-4">Skills Used</h3>
    <div class="relative grid gap-6 grid-flow-row sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4  border-caperren-green">
        <div>
            <div class="font-extrabold text-sm">Software</div>
            <hr class="text-caperren-green"/>
            <ul class="list-disc list-inside text-sm">
                <li>Python</li>
                <li>Test Driven Development</li>
            </ul>
        </div>
        <div>
            <div class="font-extrabold text-sm">Electrical</div>
            <hr class="text-caperren-green"/>
        </div>
        <div>
            <div class="font-extrabold text-sm">Other</div>
            <hr class="text-caperren-green"/>
        </div>
    </div>
    <h2 class="font-bold md:text-2xl my-4">Details</h2>
</ExperienceLayout>