import { html, type TemplateResult } from '@design.estate/dees-element';
import './dees-mobile-iconbutton.js';
import '../dees-mobile-icon/dees-mobile-icon.js';

export const demoFunc = (): TemplateResult => {
  return html`
    <style>
      .demo-container {
        padding: 2rem;
        display: flex;
        flex-direction: column;
        gap: 2rem;
      }

      .demo-section {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }

      .demo-label {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #71717a;
      }

      .demo-row {
        display: flex;
        align-items: center;
        gap: 1rem;
      }
    </style>

    <div class="demo-container">
      <div class="demo-section">
        <div class="demo-label">Sizes</div>
        <div class="demo-row">
          <dees-mobile-iconbutton size="sm" label="Small">
            <dees-mobile-icon icon="settings" size="16"></dees-mobile-icon>
          </dees-mobile-iconbutton>

          <dees-mobile-iconbutton size="md" label="Medium">
            <dees-mobile-icon icon="settings" size="20"></dees-mobile-icon>
          </dees-mobile-iconbutton>

          <dees-mobile-iconbutton size="lg" label="Large">
            <dees-mobile-icon icon="settings" size="24"></dees-mobile-icon>
          </dees-mobile-iconbutton>
        </div>
      </div>

      <div class="demo-section">
        <div class="demo-label">Common Actions</div>
        <div class="demo-row">
          <dees-mobile-iconbutton label="Edit">
            <dees-mobile-icon icon="pencil" size="20"></dees-mobile-icon>
          </dees-mobile-iconbutton>

          <dees-mobile-iconbutton label="Delete">
            <dees-mobile-icon icon="trash-2" size="20"></dees-mobile-icon>
          </dees-mobile-iconbutton>

          <dees-mobile-iconbutton label="Share">
            <dees-mobile-icon icon="share" size="20"></dees-mobile-icon>
          </dees-mobile-iconbutton>

          <dees-mobile-iconbutton label="More">
            <dees-mobile-icon icon="more-vertical" size="20"></dees-mobile-icon>
          </dees-mobile-iconbutton>
        </div>
      </div>

      <div class="demo-section">
        <div class="demo-label">States</div>
        <div class="demo-row">
          <dees-mobile-iconbutton label="Normal">
            <dees-mobile-icon icon="check" size="20"></dees-mobile-icon>
          </dees-mobile-iconbutton>

          <dees-mobile-iconbutton label="Disabled" disabled>
            <dees-mobile-icon icon="check" size="20"></dees-mobile-icon>
          </dees-mobile-iconbutton>
        </div>
      </div>
    </div>
  `;
};