import Navigation_bar from "@/packages/ui/src/_components/navigation_bar/Navigation_bar";
import Icon from "@/packages/ui/src/_components/icon/Icon";
import { Button } from "@/packages/ui/src/_components/buttons_variants/buttons/Button";

export default function Example() {
  return (
    <Navigation_bar
      title={<span>Headline</span>}
      subtitle={<span>Subtitle</span>}
      leading={
        <Button
          forceWidth="40px"
          forceHeight="40px"
          iconContent={<Icon name="arrow_back" />}
          variant="transparent"
          ripple
          variantRadio="sm"
        />
      }
      actions={
        <div style={{ display: "flex", gap: 8 }}>
          <Button
            forceWidth="40px"
            forceHeight="40px"
            iconContent={<Icon name="search" />}
            variant="transparent"
            ripple
            variantRadio="sm"
          />
          <Button
            forceWidth="40px"
            forceHeight="40px"
            iconContent={<Icon name="more_vert" />}
            variant="transparent"
            ripple
            variantRadio="sm"
          />
        </div>
      }
    />
  );
}

import Navigation_bar from "@/_components/navigation_bar/Navigation_bar";

export default function Example() {
  return (
    <>
      <Navigation_bar size="small" title="Small" subtitle="Subtitle" />
      <Navigation_bar size="medium" title="Medium" subtitle="Subtitle" />
      <Navigation_bar size="large" title="Large" subtitle="Subtitle" />
    </>
  );
}

import Navigation_bar from "@/_components/navigation_bar/Navigation_bar";

export default function Example() {
  return (
    <>
      <Navigation_bar tone="surface" outlined title="Surface outlined" subtitle="Subtitle" />
      <Navigation_bar tone="surface" elevated title="Surface elevated" subtitle="Subtitle" />
      <Navigation_bar tone="transparent" title="Transparent" subtitle="Subtitle" />
      <Navigation_bar tone="inverse" title="Inverse" subtitle="Subtitle" />
    </>
  );
}

import Navigation_bar from "@/_components/navigation_bar/Navigation_bar";

export default function Example() {
  return (
    <>
      <Navigation_bar align="start" title="Start" subtitle="Subtitle" />
      <Navigation_bar align="center" title="Center" subtitle="Subtitle" />
    </>
  );
}

import Navigation_bar from "@/packages/ui/src/_components/navigation_bar/Navigation_bar";

export default function Example() {
  return (
    <div style={{ height: 420, overflow: "auto" }}>
      <Navigation_bar
        title="Headline"
        subtitle="Subtitle"
        sticky
        fixedTop
      />
      <div style={{ height: 1200 }} />
    </div>
  );
}

import Navigation_bar from "@/_components/navigation_bar/Navigation_bar";

export default function Example() {
  return (
    <Navigation_bar
      size="large"
      title="Headline"
      subtitle="Subtitle"
      collapsed
    />
  );
}

import { useState } from "react";
import Navigation_bar from "@/_components/navigation_bar/Navigation_bar";

export default function Example() {
  const [size, setSize] = useState<"small" | "medium" | "large">("small");

  return (
    <Navigation_bar
      size={size}
      title="Headline"
      subtitle="Subtitle"
      outlined
      elevated
      sticky
      fixedTop
      collapsed={false}
    />
  );
}