Slot Picker

use icons::Plus;
use leptos::prelude::*;
use leptos_meta::Stylesheet;

use crate::components::extensions::slot_picker::{
    ButtonAdd, DayContainer, SlotDay, SlotDaysWrapper, SlotTitle, TimeSlots,
};

#[component]
pub fn DemoSlotPicker() -> impl IntoView {
    view! {
        <Stylesheet id="slot-picker" href="/components/slot_picker.css" />

        <div class="flex justify-center items-center px-5 my-10 mx-auto min-h-screen font-sans mainDiv text-primary box-border max-w-[800px]">
            <SlotDaysWrapper>
                <SlotDay>
                    <div
                        class="flex flex-grow justify-between items-center day-header"
                        style="view-transition-name: day-header-1;"
                    >
                        <SlotTitle>Monday</SlotTitle>
                        <input
                            type="checkbox"
                            switch
                            class="relative w-12 h-6 rounded-full appearance-none cursor-pointer bg-[#e4e4e7] before:bg-white before:rounded-full before:absolute before:w-5 before:h-5 before:top-0.5 before:left-0.5 checked:bg-[#27272a]"
                        />
                    </div>
                    <DayContainer>
                        <TimeSlots>""</TimeSlots>
                        <ButtonAdd>
                            <Plus />
                            Add More
                        </ButtonAdd>
                    </DayContainer>
                </SlotDay>

                <SlotDay>
                    <div
                        class="flex flex-grow justify-between items-center day-header"
                        style="view-transition-name: day-header-2;"
                    >
                        <SlotTitle>Tuesday</SlotTitle>
                        <input
                            type="checkbox"
                            switch
                            class="relative w-12 h-6 rounded-full appearance-none cursor-pointer bg-[#e4e4e7] before:bg-white before:rounded-full before:absolute before:w-5 before:h-5 before:top-0.5 before:left-0.5 checked:bg-[#27272a]"
                        />
                    </div>
                    <DayContainer>
                        <TimeSlots>""</TimeSlots>
                        <ButtonAdd>
                            <Plus />
                            Add More
                        </ButtonAdd>
                    </DayContainer>
                </SlotDay>

                <SlotDay>
                    <div
                        class="flex flex-grow justify-between items-center day-header"
                        style="view-transition-name: day-header-3;"
                    >
                        <SlotTitle>Wednesday</SlotTitle>
                        <input
                            type="checkbox"
                            switch
                            class="relative w-12 h-6 rounded-full appearance-none cursor-pointer bg-[#e4e4e7] before:bg-white before:rounded-full before:absolute before:w-5 before:h-5 before:top-0.5 before:left-0.5 checked:bg-[#27272a]"
                        />
                    </div>
                    <DayContainer>
                        <TimeSlots>""</TimeSlots>
                        <ButtonAdd>
                            <Plus />
                            Add More
                        </ButtonAdd>
                    </DayContainer>
                </SlotDay>

                <SlotDay>
                    <div
                        class="flex flex-grow justify-between items-center day-header"
                        style="view-transition-name: day-header-4;"
                    >
                        <SlotTitle>Thursday</SlotTitle>
                        <input
                            type="checkbox"
                            switch
                            class="relative w-12 h-6 rounded-full appearance-none cursor-pointer bg-[#e4e4e7] before:bg-white before:rounded-full before:absolute before:w-5 before:h-5 before:top-0.5 before:left-0.5 checked:bg-[#27272a]"
                        />
                    </div>
                    <DayContainer>
                        <TimeSlots>""</TimeSlots>
                        <ButtonAdd>
                            <Plus />
                            Add More
                        </ButtonAdd>
                    </DayContainer>
                </SlotDay>

                <SlotDay>
                    <div
                        class="flex flex-grow justify-between items-center day-header"
                        style="view-transition-name: day-header-5;"
                    >
                        <SlotTitle>Friday</SlotTitle>
                        <input
                            type="checkbox"
                            switch
                            class="relative w-12 h-6 rounded-full appearance-none cursor-pointer bg-[#e4e4e7] before:bg-white before:rounded-full before:absolute before:w-5 before:h-5 before:top-0.5 before:left-0.5 checked:bg-[#27272a]"
                        />
                    </div>
                    <DayContainer>
                        <TimeSlots>""</TimeSlots>
                        <ButtonAdd>
                            <Plus />
                            Add More
                        </ButtonAdd>
                    </DayContainer>
                </SlotDay>
            </SlotDaysWrapper>
        </div>

        <script src="/components/slot_picker.js" />
    }
}