import { Show, createSignal } from "solid-js"

export const SkillsComponent = () => {
    const [skill, setSkill] = createSignal<'coding' | 'ci-cd' | 'other'>('coding')
    return (
        <>
            <div class="max-lg:hidden">
                <div class="px-20 mt-10">
                    <h1 class="text-3xl font-bold text-neutral-100 underline">Mehr zu meinen Skills</h1>
                    <div class="flex w-full mt-8 justify-between mb-2">
                        <div class="h-72 w-64 relative">
                            <div onclick={() => setSkill('coding')} class={` ${skill() === 'coding' ? 'bg-emerald-400 shadow-inner ' : 'bg-emerald-600'} w-64 h-64 hover:scale-[1.02] transition-all cursor-pointer flex flex-col gap-4 justify-center items-center`}>
                                <p class="text-2xl font-bold text-neutral-800">Coding</p>
                                <img class="w-12 h-12" src="/img/code.svg" alt="" />
                            </div>
                            <Show when={skill() === 'coding'}>
                                <img src="/img/arrowDown.svg" class="mt-2 mx-auto" alt="" />
                            </Show>
                        </div>
                        <div class="h-72 w-64 relative">
                            <div onclick={() => setSkill('ci-cd')} class={` ${skill() === 'ci-cd' ? 'bg-emerald-400 shadow-inner ' : 'bg-emerald-600'} w-64 h-64 hover:scale-[1.02] transition-all cursor-pointer flex flex-col gap-4 justify-center items-center`}>
                                <p class="text-2xl font-bold text-neutral-800">CI/CD</p>
                                <img class="w-12 h-12" src="/img/server.svg" alt="" />
                            </div>
                            <Show when={skill() === 'ci-cd'}>
                                <img src="/img/arrowDown.svg" class="mt-2 mx-auto" alt="" />
                            </Show>
                        </div>
                        <div class="h-72 w-64 relative">
                            <div onclick={() => setSkill('other')} class={` ${skill() === 'other' ? 'bg-emerald-400 shadow-inner ' : 'bg-emerald-600'} w-64 h-64 hover:scale-[1.02] transition-all cursor-pointer flex flex-col gap-4 justify-center items-center`}>
                                <p class="text-2xl font-bold text-neutral-800">Other</p>
                                <img class="w-12 h-12" src="/img/codepen.svg" alt="" />
                            </div>
                            <Show when={skill() === 'other'}>
                                <img src="/img/arrowDown.svg" class="mt-2 mx-auto" alt="" />
                            </Show>
                        </div>
                    </div >
                    <Show when={skill() === 'coding'}>
                        <div class="w-full h-80 bg-emerald-600 px-20 flex justify-around flex-col">
                            <div class="flex flex-col gap-6">
                                <p class="text-2xl font-bold text-neutral-800">Coding</p>
                                <p class="w-1/2 text-neutral-800">In meiner Ausbildung wie auch meiner Freizeit habe ich Erfahrung mit unterschiedlichen Frameworks und Programmiersprachen gesammelt, wie zum beispiel Angular, React und Laravel</p>
                            </div>
                            <div class="w-full h-24 flex justify-between items-center">

                                <img class="h-20 w-24  object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/angular.svg.png" alt="" />
                                <img class="h-20 w-24  object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/laravel.svg.png" alt="" />
                                <img class="h-20 w-24  object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/react.png" alt="" />
                                <img class="h-20 w-24  object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/java.png" alt="" />
                                <img class="h-20 w-24  object-scale-down bg-neutral-100 p-3 rounded-lg" src="/img/express.png" alt="" />
                                <img class="h-20 w-24  object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/tailwind.svg" alt="" />
                                <img class="h-20 w-24  object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/sass.png" alt="" />
                                <img class="h-20 w-24 sepia-[.3] object-scale-down bg-neutral-800 grayscale-[.7] p-3 rounded-lg" src="/img/sql.png" alt="" />
                                <img class="h-20 w-24 sepia-[.3] object-scale-down bg-neutral-800 grayscale-[.7] p-3 rounded-lg" src="/img/prisma.png" alt="" />
                            </div>
                        </div>
                    </Show>
                    <Show when={skill() === 'ci-cd'}>
                        <div class="w-full h-80 bg-emerald-600 px-20 flex justify-around flex-col">
                            <div class="flex flex-col">
                                <p class="text-2xl font-bold text-neutral-800">CI/CD</p>
                                <p class="w-3/4 text-neutral-800">
                                    Mit Grundkenntnissen im Web-App-Deployment und Container-Management habe ich bereits erfolgreich Projekte umgesetzt.
                                    Mir sind Techniken wie BuilKite (Build-Pipelines) so wie das Resourcenmanagement mit Terraform in Azure nicht fremd und durfte da bereits meine ersten Kenntnisse sammeln.
                                    Ebenfalls bin ich gut vertraut mit moderner Kontainerisierung von Applikationen mit Docker.
                                    Dieses Portfolio zum Beispiel, läuft in einem Docker-Container und liegt hinter einem Traefik Proxy.
                                </p>
                            </div>
                            <div class="w-full h-24 flex justify-between items-center">

                                <img class="h-20 w-24 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/docker.png" alt="" />
                                <img class="h-20 w-24 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/buildkite.png" alt="" />
                                <img class="h-20 w-24 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/server.svg" alt="" />
                            </div>
                        </div>
                    </Show>
                    <Show when={skill() === 'other'}>
                        <div class="w-full h-80 bg-emerald-600 px-20 flex justify-around flex-col">
                            <div class="flex flex-col gap-6">
                                <p class="text-2xl font-bold text-neutral-800">Other</p>
                                <p class="w-1/2 text-neutral-800">
                                    In meiner Freizeit bin ich nicht nur in der Musik unterwegs, sondern schwimme auch leidenschaftlich.
                                    Guten Cappucino kann ich auch machen &#9749;&#128521;
                                    Um meine Umsetzungen vorstellen zu können, habe ich mehrere Präsentationen während meiner Ausbildung gehalten zu unterschiedlichsten themen welche meist wie eine Art Ted-Talk aufgebaut waren gehalten.
                                    Dadurch konnte ich aus meiner Schwäche vor vielen Leuten wissen zu vermitteln, ein Skill auf den ich heute Stolz sein kann.                                     </p>
                            </div>
                            <div class="w-full h-24 flex justify-between items-center">
                            </div>
                        </div>
                    </Show>
                </div>
            </div>
            <div>
                <div class="px-20 mt-10 flex flex-col gap-6 lg:hidden">
                    <h1 class="text-3xl font-bold text-neutral-100 underline">Mehr zu meinen Skills</h1>
                    <div class="w-full h-auto py-5  bg-emerald-600 px-10 flex justify-around flex-col">
                        <div class="flex flex-col gap-6">
                            <p class="text-2xl font-bold text-neutral-800">Coding</p>
                            <p class="w-full text-neutral-800">In meiner Ausbildung wie auch meiner Freizeit habe ich Erfahrung mit unterschiedlichen Frameworks und Programmiersprachen gesammelt, wie zum beispiel Angular, React und Laravel</p>
                        </div>
                        <div class="w-full flex-wrap gap-3 h-auto flex justify-between items-center">

                            <img class="h-12 w-16  object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/angular.svg.png" alt="" />
                            <img class="h-12 w-16  object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/laravel.svg.png" alt="" />
                            <img class="h-12 w-16  object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/react.png" alt="" />
                            <img class="h-12 w-16  object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/java.png" alt="" />
                            <img class="h-12 w-16  object-scale-down bg-neutral-100 p-3 rounded-lg" src="/img/express.png" alt="" />
                            <img class="h-12 w-16  object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/tailwind.svg" alt="" />
                            <img class="h-12 w-16  object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/sass.png" alt="" />
                            <img class="h-12 w-16 sepia-[.3] object-scale-down bg-neutral-800 grayscale-[.7] p-3 rounded-lg" src="/img/sql.png" alt="" />
                            <img class="h-12 w-16 sepia-[.3] object-scale-down bg-neutral-800 grayscale-[.7] p-3 rounded-lg" src="/img/prisma.png" alt="" />
                        </div>
                    </div>
                    <div class="w-full h-auto py-5  bg-emerald-600 px-10 flex justify-around flex-col">
                        <div class="flex flex-col">
                            <p class="text-2xl font-bold text-neutral-800">CI/CD</p>
                            <p class="w-full text-neutral-800">
                                Mit Grundkenntnissen im Web-App-Deployment und Container-Management habe ich bereits erfolgreich Projekte umgesetzt.
                                Mir sind Techniken wie BuilKite (Build-Pipelines) so wie das Resourcenmanagement mit Terraform in Azure nicht fremd und durfte da bereits meine ersten Kenntnisse sammeln.
                                Ebenfalls bin ich gut vertraut mit moderner Kontainerisierung von Applikationen mit Docker.
                                Dieses Portfolio zum Beispiel, läuft in einem Docker-Container und liegt hinter einem Traefik Proxy.
                            </p>
                        </div>
                        <div class="w-full flex-wrap gap-3 h-auto flex justify-between items-center">

                            <img class="h-12 w-16 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/docker.png" alt="" />
                            <img class="h-12 w-16 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/buildkite.png" alt="" />
                            <img class="h-12 w-16 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/server.svg" alt="" />
                        </div>
                    </div>
                    <div class="w-full h-auto py-5  bg-emerald-600 px-10 flex justify-around flex-col">
                        <div class="flex flex-col gap-6">
                            <p class="text-2xl font-bold text-neutral-800">Other</p>
                            <p class="w-full text-neutral-800">
                                In meiner Freizeit bin ich nicht nur in der Musik unterwegs, sondern schwimme auch leidenschaftlich.
                                Guten Cappucino kann ich auch machen &#9749;&#128521;
                                Um meine Umsetzungen vorstellen zu können, habe ich mehrere Präsentationen während meiner Ausbildung gehalten zu unterschiedlichsten themen welche meist wie eine Art Ted-Talk aufgebaut waren gehalten.
                                Dadurch konnte ich aus meiner Schwäche vor vielen Leuten wissen zu vermitteln, ein Skill auf den ich heute Stolz sein kann.
                            </p>
                        </div>
                        <div class="w-full flex-wrap gap-3 h-auto flex justify-between items-center">

                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}