import {
  Watermark,
  AppShell,
  AppShellHeader,
  AppShellContent,
  TabBar,
  Tab,
  Section,
  SectionHeader,
  Divider,
  StatChip,
  EmptyState,
} from "@m1k/ui";

export default function App() {
  const [tab, setTab] = useState("home");

  return (
    <Watermark color="#3b82f6" text="myapp">
      <AppShell>
        <AppShellHeader>
          <span className="text-2xl font-black">myapp</span>
        </AppShellHeader>

        <AppShellContent>
          <Section>
            <h1 className="text-xl font-bold">Hello</h1>
          </Section>

          <Divider />

          <Section className="flex gap-3">
            <StatChip label="Today" value={42} />
            <StatChip label="Total" value={1234} />
          </Section>
        </AppShellContent>

        <TabBar>
          <Tab
            active={tab === "home"}
            onClick={() => setTab("home")}
            label="Home"
            icon={<span>🏠</span>}
          />
          <Tab
            active={tab === "profile"}
            onClick={() => setTab("profile")}
            label="Profile"
            icon={<span>👤</span>}
          />
        </TabBar>
      </AppShell>
    </Watermark>
  );
}