import type { Component } from 'solid-js';
import {
  SSDivider,
  SSExpandable,
  SSHeader,
  SSSurface,
  SSTile,
} from 'src';
import { IconBolt, IconCheck, IconLink, IconShield } from '../../demo/content';

const LayoutPage: Component = () => (
  <div class="demo_page">
    <SSHeader title="Layout" subtitle="Surfaces, tiles, and dividers." />

    <SSSurface class="demo_surface">
      <div class="demo_section_title">Surface stacks</div>
      <div class="demo_grid">
        <SSSurface class="demo_surface demo_surface--nested">
          <div class="demo_section_title">Sub-surface</div>
          <p class="demo_text">Perfect for grouped content, metrics, or compact forms.</p>
        </SSSurface>
        <SSSurface class="demo_surface demo_surface--nested">
          <div class="demo_section_title">Another surface</div>
          <p class="demo_text">Use consistent radii and subtle shadows for hierarchy.</p>
        </SSSurface>
      </div>
    </SSSurface>

    <SSSurface class="demo_surface">
      <div class="demo_section_title">Tile list</div>
      <div class="demo_tiles">
        <SSTile
          title="Integrations"
          subtitle="24 connected services"
          icon={<IconLink />}
          trailing={<IconCheck />}
        />
        <SSTile
          title="Automation"
          subtitle="5 workflows running"
          icon={<IconBolt />}
          trailing="Live"
        />
        <SSTile
          title="Security"
          subtitle="Next scan Friday"
          icon={<IconShield />}
          trailing="Low risk"
        />
      </div>
      <SSDivider />
      <SSExpandable title="Notes">
        <div class="demo_text">
          Combine tiles with expandables to progressively reveal details.
        </div>
      </SSExpandable>
    </SSSurface>
  </div>
);

export default LayoutPage;