---
const { title, projectName, layout = {} } = Astro.props;

const defaultLayout = {
  mobile:   { left: '2%', top: '5%', width: '96%', height: 'auto' },
  tablet:   { left: '10%', top: '10%', width: '80%', height: 'auto' },
  desktop:  { left: '10%', top: '10%', width: '60%', height: '70%' }
};

const mergedLayout = {
  mobile:   { ...defaultLayout.mobile, ...(layout.mobile || {}) },
  tablet:   { ...defaultLayout.tablet, ...(layout.tablet || {}) },
  desktop:  { ...defaultLayout.desktop, ...(layout.desktop || {}) }
};
---

<div
    id={title}
    class=`window projectwindow ${projectName}`
    style="display: none;"
>
    <div id={`${title}header`} class="title-bar">
        <div class="title-bar-text">{title}</div>
        <div class="title-bar-controls">
            <button class="close" aria-label="Minimize"></button>
            <button class="close" aria-label="Close"></button>
        </div>
    </div>
    <div class="window-body" style="height: 100%;">
        <slot/>
    </div>
</div>

<style define:vars={{
  mobileLeft: mergedLayout.mobile.left,
  mobileTop: mergedLayout.mobile.top,
  mobileWidth: mergedLayout.mobile.width,
  mobileHeight: mergedLayout.mobile.height,
  tabletLeft: mergedLayout.tablet.left,
  tabletTop: mergedLayout.tablet.top,
  tabletWidth: mergedLayout.tablet.width,
  tabletHeight: mergedLayout.tablet.height,
  desktopLeft: mergedLayout.desktop.left,
  desktopTop: mergedLayout.desktop.top,
  desktopWidth: mergedLayout.desktop.width,
  desktopHeight: mergedLayout.desktop.height
}}>
.window {
  animation: createBox 0.2s;
  position: absolute;
}

@keyframes createBox {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

/* Mobile */
@media (max-width: 510px) {
  .window {
    left: var(--mobileLeft);
    top: var(--mobileTop);
    max-width: var(--mobileWidth);
    max-height: var(--mobileHeight);
  }
}

/* Tablet */
@media (min-width: 541px) and (max-width: 1080px) {
  .window {
    left: var(--tabletLeft);
    top: var(--tabletTop);
    max-width: var(--tabletWidth);
    max-height: var(--tabletHeight);
  }
}

/* Desktop */
@media (min-width: 1081px) {
  .window {
    left: var(--desktopLeft);
    top: var(--desktopTop);
    max-width: var(--desktopWidth);
    max-height: var(--desktopHeight);

    width: var(--desktopWidth);
    height: var(--desktopHeight);

  }
}
</style>