import { html, css, cssManager } from '@design.estate/dees-element';
import './dees-tile.js';

export const demoFunc = () => {
  return html`
    <dees-demowrapper>
      <style>
        ${css`
          .demoBox {
            background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
            padding: 40px;
            display: flex;
            flex-direction: column;
            gap: 24px;
          }
          .tile-demo-content {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
            font-size: 13px;
          }
          .footer-stats {
            display: flex;
            align-items: center;
            gap: 24px;
            font-size: 11px;
            width: 100%;
          }
          .footer-stats .stat {
            display: flex;
            align-items: center;
            gap: 6px;
          }
          .footer-stats .stat strong {
            color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
          }
        `}
      </style>
      <div class="demoBox">
        <dees-tile heading="Simple Tile" style="height: 200px;">
          <div class="tile-demo-content">Content area with rounded corners</div>
        </dees-tile>

        <dees-tile heading="Tile with Footer" style="height: 200px;">
          <div class="tile-demo-content">Content goes here</div>
          <div slot="footer" class="footer-stats">
            <span class="stat">latest <strong>42</strong></span>
            <span class="stat">min <strong>12</strong></span>
            <span class="stat">max <strong>87</strong></span>
            <span class="stat">avg <strong>45.3</strong></span>
          </div>
        </dees-tile>

        <dees-tile style="height: 200px;">
          <div slot="header" style="display:flex;align-items:center;gap:12px;width:100%;">
            <span style="font-weight:500;">Custom Header</span>
            <input type="text" placeholder="Search..." style="flex:1;max-width:200px;padding:2px 8px;border:1px solid;border-radius:4px;font-size:12px;background:transparent;color:inherit;border-color:inherit;">
          </div>
          <div class="tile-demo-content">Custom header slot with search input</div>
        </dees-tile>
      </div>
    </dees-demowrapper>
  `;
};