import { Button, Logo, MedixProvider, Navbar, useThemeMode } from '@medixdeck/ui';

// Next.js App Router: mark this component "use client" when using hooks.
function ThemeToggle() {
  const { mounted, themeMode, toggleThemeMode } = useThemeMode();

  // Avoid hydration mismatch: next-themes resolves the theme after mount.
  if (!mounted) return null;

  return (
    <Button variant="solid" colorScheme="blue" onClick={toggleThemeMode}>
      Switch to {themeMode === 'dark' ? 'light' : 'dark'} mode
    </Button>
  );
}

export function App() {
  return (
    <MedixProvider defaultColorMode="light">
      <Navbar
        navItems={[{ label: 'Docs', href: '#docs' }]}
        ctaLabel="Talk to a Doctor"
        ctaHref="/consult"
      />
      <ThemeToggle />
      <Logo variant="purple" height={28} />
    </MedixProvider>
  );
}

import { useIsDarkMode, useThemeMode } from '@medixdeck/ui';

function ThemeStatus() {
  const { themeMode, themeSetting, setThemeMode, toggleThemeMode } = useThemeMode();
  const isDarkMode = useIsDarkMode();

  return (
    <>
      <p>Resolved mode: {themeMode}</p>
      <p>Following: {themeSetting ?? 'system'}</p>
      <p>Dark mode active: {String(isDarkMode)}</p>
      <button onClick={() => setThemeMode('dark')}>Dark</button>
      <button onClick={() => setThemeMode('light')}>Light</button>
      <button onClick={() => setThemeMode('system')}>System</button>
      <button onClick={toggleThemeMode}>Toggle</button>
    </>
  );
}

import {
  Navbar,
  Footer,
  Accordion,
  BlogCard,
  DashboardLayout,
} from "@medixdeck/ui";

<Navbar          colorScheme="purple" navItems={[...]} ctaLabel="Talk to a Doctor" />
<Footer          colorScheme="purple" />
<Accordion       colorScheme="purple" items={[...]} />
<BlogCard        colorScheme="purple" title="..." />
<DashboardLayout colorScheme="purple">{/* ... */}</DashboardLayout>

import { useColorScheme, Navbar, Footer, Accordion } from "@medixdeck/ui";

function Page() {
  const { colorScheme, toggleColorScheme } = useColorScheme(); // defaults to "blue"

  return (
    <>
      <button onClick={toggleColorScheme}>
        Switch to {colorScheme === "blue" ? "purple" : "blue"}
      </button>
      <Navbar    colorScheme={colorScheme} navItems={[...]} />
      <Accordion colorScheme={colorScheme} items={[...]} />
      <Footer    colorScheme={colorScheme} />
    </>
  );
}

import { Toaster, toast } from '@medixdeck/ui';

function App() {
  return (
    <>
      <Toaster />
      <button onClick={() => toast.success('Changes saved successfully!')}>Save</button>
    </>
  );
}

<ServerErrorPage
  errorMessage="TypeError: Cannot read properties of undefined (reading 'id')"
  onAction={() => reset()}
/>

<Accordion
  answerType="MD"
  items={[{ id: 'q1', question: 'Markdown Support?', answer: 'Yes, **boldly** so!' }]}
/>

<Select
  multiple
  placeholder="Select specialties..."
  options={[{ value: 'cardio', label: 'Cardiology' }]}
  onChange={(values) => console.log(values)} // values is string | string[]
/>

import { DashboardLayout } from '@medixdeck/ui';

<DashboardLayout
  colorScheme="purple"
  user={{ name: 'Dr. Okedi Williams', email: 'williams@medixdeck.com' }}
  navGroups={[
    {
      items: [
        { label: 'Home', href: '/', isActive: true },
        { label: 'Messages', href: '/messages', badge: 6 },
      ],
    },
    {
      groupLabel: 'Account',
      items: [
        { label: 'Profile', href: '/profile' },
        { label: 'Notifications', href: '/notifications', hasDot: true },
      ],
    },
  ]}
  onLogout={() => auth.signOut()}
  renderLink={(item, children) => <Link href={item.href}>{children}</Link>}
>
  {/* page content */}
</DashboardLayout>;

import { LuHouse, LuMessageCircle, LuUser } from 'react-icons/lu';

<DashboardLayout
  mobileNavItems={[
    { label: 'Home', href: '/', icon: <LuHouse size={22} />, isActive: true },
    { label: 'Messages', href: '/messages', icon: <LuMessageCircle size={22} />, badge: 6 },
    { label: 'Profile', href: '/profile', icon: <LuUser size={22} /> },
  ]}
>
  {/* ... */}
</DashboardLayout>;

<DashboardLayout
  scoreCard={{
    name: 'Dr. Okedi Williams',
    role: 'Cardiologist',
    avatarSrc: '/dr-okedi.jpg', // optional — initials fallback
    tier: 'gold', // "bronze" | "silver" | "gold" | "platinum" | "diamond"
    medixScore: 847,
    link: '/doctor/profile', // optional — makes the card clickable
  }}
>
  {/* ... */}
</DashboardLayout>

<DashboardLayout
  greetingSubtext={`${new Date().toLocaleDateString('en-GB', {
    weekday: 'long',
    day: 'numeric',
    month: 'long',
    year: 'numeric',
  })} · 8 consultations scheduled today`}
>
  {/* ... */}
</DashboardLayout>

import { Footer } from '@medixdeck/ui';

<Footer
  colorScheme="purple"
  certifications={[
    { name: 'NDPR Compliant', href: 'https://nitda.gov.ng' },
    { name: 'MDCN Certified Platform', href: 'https://mdcn.gov.ng' },
    { name: 'ISO 27001', href: '#' },
  ]}
/>;

import { ThemeColorPalette } from '@medixdeck/ui';

export function DesignTokensPage() {
  return <ThemeColorPalette mt="8" />;
}