import { html } from '@design.estate/dees-element';
import { injectCssVariables } from '../../00variables.js';

export const demoFunc = () => {
  injectCssVariables();
  return html`
  <style>
    .demo-section {
      margin-bottom: 2rem;
    }
    .demo-section h3 {
      margin: 0 0 1rem 0;
      font-size: 0.875rem;
      color: var(--dees-muted-foreground);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .demo-grid {
      display: grid;
      gap: 1rem;
      max-width: 400px;
    }
    .demo-row {
      display: flex;
      gap: 1rem;
    }
  </style>

  <div class="demo-section">
    <h3>Basic Inputs</h3>
    <div class="demo-grid">
      <dees-mobile-input
        placeholder="Enter text..."
      ></dees-mobile-input>

      <dees-mobile-input
        label="Email Address"
        type="email"
        placeholder="you@example.com"
      ></dees-mobile-input>

      <dees-mobile-input
        label="Password"
        type="password"
        placeholder="Enter password"
      ></dees-mobile-input>
    </div>
  </div>

  <div class="demo-section">
    <h3>Input Types</h3>
    <div class="demo-grid">
      <dees-mobile-input
        label="Phone Number"
        type="tel"
        placeholder="+1 (555) 000-0000"
      ></dees-mobile-input>

      <dees-mobile-input
        label="Quantity"
        type="number"
        placeholder="0"
      ></dees-mobile-input>

      <dees-mobile-input
        label="Search"
        type="search"
        placeholder="Search..."
      ></dees-mobile-input>
    </div>
  </div>

  <div class="demo-section">
    <h3>States</h3>
    <div class="demo-grid">
      <dees-mobile-input
        label="Required Field"
        placeholder="This field is required"
        required
      ></dees-mobile-input>

      <dees-mobile-input
        label="Disabled Input"
        placeholder="Cannot edit"
        disabled
        value="Read only value"
      ></dees-mobile-input>

      <dees-mobile-input
        label="With Error"
        placeholder="Enter valid email"
        type="email"
        value="invalid-email"
        error="Please enter a valid email address"
      ></dees-mobile-input>
    </div>
  </div>

  <div class="demo-section">
    <h3>Autocomplete</h3>
    <div class="demo-grid">
      <dees-mobile-input
        label="Username"
        autocomplete="username"
        placeholder="Enter username"
      ></dees-mobile-input>

      <dees-mobile-input
        label="Current Password"
        type="password"
        autocomplete="current-password"
        placeholder="Enter password"
      ></dees-mobile-input>
    </div>
  </div>
`;
};