import Landing_banner from "@/packages/ui/src/_components/landing_banner/Landing_banner";
import { Button } from "@/packages/ui/src/_components/buttons_variants/buttons/Button";
import Image from "@/packages/ui/src/_components/img/Image";

export default function Example() {
  return (
    <Landing_banner
      variant="grad-06"
      align="start"
      title="Build faster"
      description="Reusable components with a consistent visual language."
      ctaButtons={[
        <Button key="primary" variant="primary">Get started</Button>,
        <Button key="secondary" variant="secondary">Docs</Button>,
      ]}
      media={
        <Image
          src="/images/image_placeholder.png"
          alt="Preview"
          width="420px"
          height="280px"
        />
      }
    />
  );
}

import Landing_banner from "@/_components/landing_banner/Landing_banner";

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

import Landing_banner from "@/_components/landing_banner/Landing_banner";

export default function Example() {
  return (
    <>
      <Landing_banner variant="primary" title="Solid" />
      <Landing_banner variant="primary-tonal" title="Tonal" />
      <Landing_banner variant="grad-06" title="Gradient" />
    </>
  );
}

import Landing_banner from "@/_components/landing_banner/Landing_banner";

export default function Example() {
  return (
    <Landing_banner
      variant="info-tonal"
      title="Reversed"
      reverse
    />
  );
}

import Landing_banner from "@/_components/landing_banner/Landing_banner";

export default function Example() {
  return (
    <Landing_banner
      variant="secondary-tonal"
      kicker="Docs"
      title="Text-only banner"
      description="Useful for small sections."
    />
  );
}

import Landing_banner from "@/_components/landing_banner/Landing_banner";

export default function Example() {
  return (
    <Landing_banner
      variant="grad-12"
      title="Animated"
      animated
    />
  );
}

import Landing_banner from "@/packages/ui/src/_components/landing_banner/Landing_banner";
import { Button } from "@/packages/ui/src/_components/buttons_variants/buttons/Button";

export default function Example() {
  return (
    <Landing_banner
      variant="primary-tonal"
      kicker="Announcement"
      title="A longer headline to validate wrapping and spacing"
      description="This is a longer description to test line breaks and CTA wrapping."
      ctaButtons={[
        <Button key="1" variant="primary">Primary</Button>,
        <Button key="2" variant="secondary">Secondary</Button>,
        <Button key="3" variant="transparent">Tertiary</Button>,
      ]}
    />
  );
}

import { useState } from "react";
import Landing_banner from "@/packages/ui/src/_components/landing_banner/Landing_banner";

export default function Example() {
  const [reverse, setReverse] = useState(false);

  return (
    <Landing_banner
      variant="grad-06"
      align="start"
      title="Landing Banner"
      description="Docs playground"
      reverse={reverse}
    />
  );
}