import { html } from '@design.estate/dees-element';
import { injectCssVariables } from '../../00variables.js';

export const demoFunc = () => {
  injectCssVariables();
  return html`
  <style>
    .demo-section {
      margin-bottom: 2rem;
    }
    .demo-section h3 {
      margin: 0 0 1rem 0;
      font-size: 0.875rem;
      color: var(--dees-muted-foreground);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .demo-row {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      align-items: center;
    }
    .icon-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem;
      border-radius: var(--dees-radius);
      background: var(--dees-surface);
      min-width: 80px;
    }
    .icon-label {
      font-size: 0.75rem;
      color: var(--dees-muted-foreground);
    }
  </style>

  <div class="demo-section">
    <h3>Common Icons</h3>
    <div class="demo-row">
      <div class="icon-item">
        <dees-mobile-icon icon="home" size="24"></dees-mobile-icon>
        <span class="icon-label">home</span>
      </div>
      <div class="icon-item">
        <dees-mobile-icon icon="settings" size="24"></dees-mobile-icon>
        <span class="icon-label">settings</span>
      </div>
      <div class="icon-item">
        <dees-mobile-icon icon="user" size="24"></dees-mobile-icon>
        <span class="icon-label">user</span>
      </div>
      <div class="icon-item">
        <dees-mobile-icon icon="search" size="24"></dees-mobile-icon>
        <span class="icon-label">search</span>
      </div>
      <div class="icon-item">
        <dees-mobile-icon icon="menu" size="24"></dees-mobile-icon>
        <span class="icon-label">menu</span>
      </div>
      <div class="icon-item">
        <dees-mobile-icon icon="x" size="24"></dees-mobile-icon>
        <span class="icon-label">x</span>
      </div>
    </div>
  </div>

  <div class="demo-section">
    <h3>Sizes</h3>
    <div class="demo-row">
      <dees-mobile-icon icon="star" size="16"></dees-mobile-icon>
      <dees-mobile-icon icon="star" size="20"></dees-mobile-icon>
      <dees-mobile-icon icon="star" size="24"></dees-mobile-icon>
      <dees-mobile-icon icon="star" size="32"></dees-mobile-icon>
      <dees-mobile-icon icon="star" size="48"></dees-mobile-icon>
    </div>
  </div>

  <div class="demo-section">
    <h3>Colors</h3>
    <div class="demo-row">
      <dees-mobile-icon icon="heart" size="24" color="var(--dees-danger)"></dees-mobile-icon>
      <dees-mobile-icon icon="check-circle" size="24" color="var(--dees-success)"></dees-mobile-icon>
      <dees-mobile-icon icon="alert-triangle" size="24" color="var(--dees-warning)"></dees-mobile-icon>
      <dees-mobile-icon icon="info" size="24" color="var(--dees-primary)"></dees-mobile-icon>
    </div>
  </div>

  <div class="demo-section">
    <h3>Stroke Width</h3>
    <div class="demo-row">
      <dees-mobile-icon icon="circle" size="32" strokeWidth="1"></dees-mobile-icon>
      <dees-mobile-icon icon="circle" size="32" strokeWidth="2"></dees-mobile-icon>
      <dees-mobile-icon icon="circle" size="32" strokeWidth="3"></dees-mobile-icon>
    </div>
  </div>
`;
};