import { html, css, cssManager } from '@design.estate/dees-element';
import type { UpladminOptionCard } from './upladmin-option-card.js';

export const demoFunc = () => html`
  <style>
    .demo-container {
      padding: 24px;
      background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
      min-height: 100vh;
    }
    .demo-section {
      margin-bottom: 32px;
    }
    .demo-title {
      font-size: 14px;
      font-weight: 600;
      color: ${cssManager.bdTheme('#09090b', '#fafafa')};
      margin-bottom: 16px;
    }
    .demo-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      gap: 12px;
    }
  </style>
  <div class="demo-container">
    <div class="demo-section">
      <div class="demo-title">Severity Variants</div>
      <div class="demo-grid">
        <upladmin-option-card
          variant="critical"
          icon="lucide:AlertCircle"
          label="Critical"
          description="Severe impact"
        ></upladmin-option-card>
        <upladmin-option-card
          variant="major"
          icon="lucide:AlertTriangle"
          label="Major"
          description="Significant impact"
        ></upladmin-option-card>
        <upladmin-option-card
          variant="minor"
          icon="lucide:Info"
          label="Minor"
          description="Limited impact"
        ></upladmin-option-card>
        <upladmin-option-card
          variant="maintenance"
          icon="lucide:Wrench"
          label="Maintenance"
          description="Scheduled work"
          selected
        ></upladmin-option-card>
      </div>
    </div>

    <div class="demo-section">
      <div class="demo-title">Status Variants</div>
      <div class="demo-grid">
        <upladmin-option-card
          variant="investigating"
          icon="lucide:Search"
          label="Investigating"
          description="Looking into it"
        ></upladmin-option-card>
        <upladmin-option-card
          variant="identified"
          icon="lucide:Target"
          label="Identified"
          description="Root cause found"
        ></upladmin-option-card>
        <upladmin-option-card
          variant="monitoring"
          icon="lucide:Eye"
          label="Monitoring"
          description="Fix applied"
          selected
        ></upladmin-option-card>
        <upladmin-option-card
          variant="resolved"
          icon="lucide:CheckCircle"
          label="Resolved"
          description="Issue fixed"
        ></upladmin-option-card>
        <upladmin-option-card
          variant="postmortem"
          icon="lucide:FileText"
          label="Postmortem"
          description="Analysis complete"
        ></upladmin-option-card>
      </div>
    </div>

    <div class="demo-section">
      <div class="demo-title">States</div>
      <div class="demo-grid">
        <upladmin-option-card
          variant="primary"
          icon="lucide:Star"
          label="Normal"
        ></upladmin-option-card>
        <upladmin-option-card
          variant="primary"
          icon="lucide:Star"
          label="Selected"
          selected
        ></upladmin-option-card>
        <upladmin-option-card
          variant="primary"
          icon="lucide:Star"
          label="Disabled"
          disabled
        ></upladmin-option-card>
      </div>
    </div>
  </div>
`;