import { html } from '@design.estate/dees-element';

export const demo = () => html`
  <style>
    .demo-container {
      padding: 40px;
      background: #f5f5f5;
    }
    .demo-section {
      margin-bottom: 60px;
    }
    h3 {
      margin-bottom: 20px;
      font-size: 18px;
      font-weight: 600;
    }
    .tile-row {
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
      align-items: flex-start;
    }
  </style>

  <div class="demo-container">
    <div class="demo-section">
      <h3>Audio Tiles</h3>
      <div class="tile-row">
        <dees-tile-audio
          src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
          title="SoundHelix Song 1"
          artist="T. Schuerger"
          label="soundhelix-1.mp3"
          @tile-click=${(e: CustomEvent) => console.log('Audio clicked:', e.detail)}
        ></dees-tile-audio>

        <dees-tile-audio
          src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3"
          title="SoundHelix Song 2"
          artist="T. Schuerger"
          label="soundhelix-2.mp3"
        ></dees-tile-audio>

        <dees-tile-audio
          src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3"
          title="SoundHelix Song 3"
          label="soundhelix-3.mp3"
        ></dees-tile-audio>
      </div>
    </div>

    <div class="demo-section">
      <h3>Size Variants</h3>
      <div class="tile-row">
        <dees-tile-audio
          size="small"
          src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
          title="Small"
          label="small.mp3"
        ></dees-tile-audio>

        <dees-tile-audio
          src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
          title="Default"
          label="default.mp3"
        ></dees-tile-audio>

        <dees-tile-audio
          size="large"
          src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
          title="Large"
          label="large.mp3"
        ></dees-tile-audio>
      </div>
    </div>
  </div>
`;