import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators.js";

import "@components/AppIcon";

@customElement("arx-app-grid")
export class AppGrid extends LitElement {
  @property()
  apps: {
    icon: string | undefined;
    color: string;
    href: string;
    name: string;
  }[] = [];

  static override styles = [
    css`
      .app-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: 20px;
        padding: 30px;
        width: minmax(800px, 100cqw);
        margin-top: 10px;
      }

      @media (min-width: 1024px) {
        .app-grid {
          width: 500px;
        }
      }

      @media (max-width: 768px) {
        .app-grid {
          grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
          gap: 15px;
          padding: 20px;
        }
      }

      @media (max-width: 480px) {
        .app-grid {
          grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
          gap: 10px;
          padding: 15px;
        }
      }
    `,
  ];

  override render() {
    return html`
      <div class="app-grid">
        ${this.apps.map(
          (app) => html`
            <arx-app-icon
              .icon=${app.icon}
              .color=${app.color}
              .href=${app.href}
              .name=${app.name}
            ></arx-app-icon>
          `
        )}
      </div>
    `;
  }
}