Inspector

'use client';
import { useState, type ReactNode } from 'react';
import {
  Inspector,
  InspectorHeader,
  InspectorContent,
  InspectorSeparator,
  ScrollArea,
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
  SelectGroup,
  Avatar,
  Badge,
  Icon,
  type InspectorVariant,
} from '@mbsw/ui';
import { CalendarDays, FolderKanban } from 'lucide-react';

function Property({ label, children }: { label: string; children: ReactNode }) {
  return (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: '68px minmax(0, 1fr)',
        alignItems: 'center',
        gap: 12,
        minHeight: 28,
      }}
    >
      <dt style={{ color: 'var(--riido-foreground-secondary)' }}>{label}</dt>
      <dd style={{ margin: 0, display: 'flex', alignItems: 'center', gap: 6 }}>
        {children}
      </dd>
    </div>
  );
}

export default function Demo() {
  const settings = {
    "title": "Design system guide",
    "description": "New user onboarding",
    "variant": "default"
  };
  const [status, setStatus] = useState('in-progress');
  return (
    <ScrollArea
      variant="horizontal"
      style={{ width: 320, maxWidth: '100%' }}
      viewportProps={{ role: 'region', 'aria-label': "Task information preview" }}
    >
      <Inspector
        variant={settings.variant as InspectorVariant}
        style={{
          width: '100%',
          height: settings.variant === 'scroll' ? 280 : 'auto',
        }}
        aria-label={"Task information"}
      >
        <InspectorHeader>
          <h2
            style={{
              margin: 0,
              fontSize: 14,
              lineHeight: '24px',
              fontWeight: 600,
            }}
          >
            {"Task information"}
          </h2>
        </InspectorHeader>
        <InspectorSeparator />
        <InspectorContent>
          <div style={{ display: 'grid', gap: 4, padding: '4px 0 8px' }}>
            <span
              style={{
                fontSize: 12,
                color: 'var(--riido-foreground-tertiary)',
              }}
            >
              WORK-128
            </span>
            <p
              style={{
                margin: 0,
                fontSize: 14,
                lineHeight: '20px',
                fontWeight: 500,
              }}
            >
              {settings.title}
            </p>
          </div>
        </InspectorContent>
        <InspectorSeparator />
        <InspectorContent>
          <dl
            style={{
              display: 'grid',
              gap: 4,
              margin: 0,
              width: '100%',
              fontSize: 12,
              lineHeight: '18px',
            }}
          >
            <Property label={"Status"}>
              <Select value={status} onValueChange={setStatus}>
                <SelectTrigger
                  size="sm"
                  aria-label={"Task status"}
                  style={{ width: '100%' }}
                >
                  <SelectValue />
                </SelectTrigger>
                <SelectContent position="popper" sideOffset={4}>
                  <SelectGroup>
                    <SelectItem value="todo">{"To do"}</SelectItem>
                    <SelectItem value="in-progress">
                      {"In progress"}
                    </SelectItem>
                    <SelectItem value="done">{"Complete"}</SelectItem>
                  </SelectGroup>
                </SelectContent>
              </Select>
            </Property>
            <Property label={"Assignee"}>
              <Avatar initials="M" label={"Nickname"} size="sm" />
              <span>{"Nickname"}</span>
            </Property>
            <Property label={"Project"}>
              <Icon icon={FolderKanban} size="xs" decorative />
              <span>{settings.description}</span>
            </Property>
            <Property label={"Start date"}>
              <Icon icon={CalendarDays} size="xs" decorative />
              <time dateTime="2026-10-01">2026. 10. 01.</time>
            </Property>
            <Property label={"Due date"}>
              <Icon icon={CalendarDays} size="xs" decorative />
              <time dateTime="2026-10-08">2026. 10. 08.</time>
            </Property>
            <Property label={"Tags"}>
              <Badge
                size="sm"
                shape="square"
                style={{
                  backgroundColor: 'var(--riido-primitive-colors-iris-400)',
                  color: 'var(--riido-foreground-on-brand)',
                }}
              >
                {"Design"}
              </Badge>
            </Property>
          </dl>
        </InspectorContent>
        <InspectorSeparator />
        <InspectorContent>
          <span
            style={{
              color: 'var(--riido-foreground-tertiary)',
              fontSize: 12,
              lineHeight: '20px',
            }}
          >
            {"Created"}{' '}
            <time dateTime="2026-09-28">2026. 09. 28.</time>
          </span>
        </InspectorContent>
      </Inspector>
    </ScrollArea>
  );
}