use leptos::prelude::*;

#[component]
pub fn DemoCardTilting() -> impl IntoView {
    view! {
        <style>
            {".tilting-card-body {
  box-shadow: var(--shadow);
}

.mouse-position-tracker {
  width: calc(100% / 3);
  height: calc(100% / 3);
  z-index: 2;
}

/* 1st, 4th, 7th */
.mouse-position-tracker:nth-child(3n - 2) {
  left: 0;
}
/* 2nd, 5th, 8th */
.mouse-position-tracker:nth-child(3n - 1) {
  left: calc(100% / 3);
}

/* 2nd, 5th, 8th */
.mouse-position-tracker:nth-child(3n) {
  right: 0;
}

/* 4 to 6 */
.mouse-position-tracker:nth-child(n + 4):nth-child(-n + 6) {
  top: calc(100% / 3);
}
/* 7 to 9 */
.mouse-position-tracker:nth-child(n + 7):nth-child(-n + 9) {
  bottom: 0;
}



.tilting-card-body {
  --perspective: 500px;
  --rotationX: 0;
  --rotationY: 0;
  --rotationZ: 0;
  --angle: 15deg;
  transform: perspective(var(--perspective)) rotateX(var(--rotationX))
    rotateY(var(--rotationY)) rotateZ(var(--rotationZ));
  transition: transform 500ms ease;
}

.mouse-position-tracker:nth-child(1):hover ~ .tilting-card-body {
  --rotationX: var(--angle);
  --rotationY: calc(var(--angle) * -1);
}

.mouse-position-tracker:nth-child(2):hover ~ .tilting-card-body {
  --rotationX: var(--angle);
}

.mouse-position-tracker:nth-child(3):hover ~ .tilting-card-body {
  --rotationX: var(--angle);
  --rotationY: var(--angle);
}

.mouse-position-tracker:nth-child(4):hover ~ .tilting-card-body {
  --rotationY: calc(var(--angle) * -1);
}

.mouse-position-tracker:nth-child(6):hover ~ .tilting-card-body {
  --rotationY: var(--angle);
}

.mouse-position-tracker:nth-child(7):hover ~ .tilting-card-body {
  --rotationY: calc(var(--angle) * -1);
  --rotationX: calc(var(--angle) * -1);
}

.mouse-position-tracker:nth-child(8):hover ~ .tilting-card-body {
  --rotationX: calc(var(--angle) * -1);
}

.mouse-position-tracker:nth-child(9):hover ~ .tilting-card-body {
  --rotationY: var(--angle);
  --rotationX: calc(var(--angle) * -1);
}"}
        </style>
        <div class="grid place-items-center min-h-[500px]">

            <div class="relative tilting-card-wrapper" style="width: 15rem; aspect-ratio: 1 / 2;">
                <div class="absolute mouse-position-tracker" />
                <div class="absolute mouse-position-tracker" />
                <div class="absolute mouse-position-tracker" />
                <div class="absolute mouse-position-tracker" />
                <div class="absolute mouse-position-tracker" />
                <div class="absolute mouse-position-tracker" />
                <div class="absolute mouse-position-tracker" />
                <div class="absolute mouse-position-tracker" />
                <div class="absolute mouse-position-tracker" />
                <div
                    class="grid absolute inset-0 place-content-center text-center bg-neutral-500 tilting-card-body"
                    style="background-image: url('https://images.unsplash.com/photo-1528321917418-af00f8823ded?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTg0MjY1Mzg&ixlib=rb-1.2.1&q=80&w=800'); background-size: cover; background-position: center;"
                >
                    <h1 class="p-0.5 m-0 bg-neutral-300">Tilting Card</h1>
                    <p class="p-0.5 m-0 bg-neutral-300">With CSS only</p>
                </div>
            </div>
        </div>
    }
}