import Alink from "@/_components/alink/Alink";

export default function Example() {
  return (
    <>
      <Alink href="#docs" onClick={(e) => e.preventDefault()}>Go to docs</Alink>
      <Alink href="#pricing" onClick={(e) => e.preventDefault()}>Pricing</Alink>
      <Alink href="#account" onClick={(e) => e.preventDefault()} title="Account settings">Account</Alink>
    </>
  );
}

import Alink from "@/_components/alink/Alink";

export default function Example() {
  return (
    <>
      <Alink href="#external" target="_blank" onClick={(e) => e.preventDefault()}>
        External (auto rel)
      </Alink>

      <Alink href="#external" target="_blank" onClick={(e) => e.preventDefault()} rel="nofollow">
        External (custom rel)
      </Alink>
    </>
  );
}

import { useState } from "react";
import Alink from "@/_components/alink/Alink";
import { Button } from "@/_components/buttons_variants/buttons/Button";

export default function Example() {
  const [disabled, setDisabled] = useState(true);

  return (
    <>
      <Button variant="primary" onClick={() => setDisabled((v) => !v)}>
        Toggle disabled
      </Button>

      <Alink
        href="#billing" onClick={(e) => e.preventDefault()}
        ariaDisabled={disabled}
        style={{
          opacity: disabled ? 0.45 : 1,
          cursor: disabled ? "not-allowed" : "pointer",
        }}
      >
        Billing (disabled behavior)
      </Alink>
    </>
  );
}

import { useState } from "react";
import Alink from "@/_components/alink/Alink";

export default function Example() {
  const [clicks, setClicks] = useState(0);

  return (
    <>
      <div>Click count: {clicks}</div>

      <Alink
        href="#docs" onClick={(e) => e.preventDefault()}
        onClick={() => setClicks((v) => v + 1)}
      >
        Track click + navigate
      </Alink>

      <Alink
        href="#docs" onClick={(e) => e.preventDefault()}
        onClick={(e) => {
          e.preventDefault();
          setClicks((v) => v + 1);
          // router.push("/docs");
        }}
      >
        Track click + prevent default
      </Alink>
    </>
  );
}

import Alink from "@/_components/alink/Alink";

export default function Example() {
  return (
    <>
      <Alink href="#brand-assets" download onClick={(e) => e.preventDefault()}>
        Download (boolean)
      </Alink>

      <Alink href="#report" download="report-2026.pdf" onClick={(e) => e.preventDefault()}>
        Download (filename)
      </Alink>
    </>
  );
}

import Alink from "@/_components/alink/Alink";

export default function Example() {
  return (
    <>
      <Alink href="#alink" onClick={(e) => e.preventDefault()} ariaCurrent="page">
        Current page
      </Alink>

      <Alink href="#search" onClick={(e) => e.preventDefault()} ariaLabel="Go to search page">
        Search
      </Alink>
    </>
  );
}

import Alink from "@/packages/ui/src/_components/alink/Alink";

export default function Example() {
  return (
    <Alink
      href="#external"
      target="_blank" onClick={(e) => e.preventDefault()}
      hrefLang="en"
      type="text/html"
      referrerPolicy="no-referrer"
      ping="https://example.com/ping"
      media="(prefers-color-scheme: dark)"
      title="Full attributes example"
    >
      Full attrs
    </Alink>
  );
}

import Link from "next/link";
import Alink from "@/packages/ui/src/_components/alink/Alink";

export default function Example() {
  return (
    <Link href="#docs" onClick={(e) => e.preventDefault()} passHref legacyBehavior>
      <Alink>Go to docs</Alink>
    </Link>
  );
}