import {
  CirclePlusIcon,
  HandCoinsIcon,
  HelpCircleIcon,
  TriangleAlertIcon,
  Wallet2Icon,
} from "lucide-react";
import AppHeader from "src/components/AppHeader";

import SubWalletDarkSVG from "public/images/illustrations/sub-wallet-dark.svg";
import SubWalletLightSVG from "public/images/illustrations/sub-wallet-light.svg";
import ResponsiveLinkButton from "src/components/ResponsiveLinkButton";
import { ExternalLinkButton } from "src/components/ui/custom/external-link-button";
import { LinkButton } from "src/components/ui/custom/link-button";

export function SubwalletIntro() {
  return (
    <div className="grid gap-4">
      <AppHeader
        title="Sub-wallets"
        pageTitle="Sub-wallets"
        description="Create sub-wallets for yourself, friends, family or coworkers"
        contentRight={
          <>
            <ExternalLinkButton
              to="https://guides.getalby.com/user-guide/alby-hub/sub-wallets"
              variant="outline"
              size="icon"
            >
              <HelpCircleIcon className="size-4" />
            </ExternalLinkButton>
            <ResponsiveLinkButton
              to="/sub-wallets/new"
              icon={CirclePlusIcon}
              text="New Sub-wallet"
            />
          </>
        }
      />
      <div>
        <div className="flex flex-col gap-6 max-w-(--breakpoint-md)">
          <div className="mb-2">
            <img src={SubWalletDarkSVG} className="w-72 hidden dark:block" />
            <img src={SubWalletLightSVG} className="w-72 dark:hidden" />
          </div>
          <div>
            <div className="flex flex-row gap-3">
              <Wallet2Icon className="size-6" />
              <div className="font-medium">
                Sub-wallets are separate wallets hosted by your Alby Hub
              </div>
            </div>
            <div className="ml-9 text-muted-foreground text-sm">
              Each sub-wallet has its own balance and can be used as a separate
              wallet that can be connected to Alby Account or any app.
            </div>
          </div>
          <div>
            <div className="flex flex-row gap-3">
              <HandCoinsIcon className="size-6" />
              <div className="font-medium">
                Sub-wallets depend on your Alby Hub lightning balance and
                receive limit
              </div>
            </div>
            <div className="ml-9 text-muted-foreground text-sm">
              Sub-wallets are using your Hubs node liquidity. They can receive
              funds as long as you have enough receive limit in your channels.
            </div>
          </div>
          <div>
            <div className="flex flex-row gap-3">
              <TriangleAlertIcon className="size-6" />
              <div className="font-medium">
                Be wary of spending sub-wallets funds
              </div>
            </div>
            <div className="ml-9 text-muted-foreground text-sm">
              Make sure you always maintain enough funds in your lightning
              balance to prevent sub-wallets becoming unspendable. Sub-wallet
              payments might fail if the amount isn't available in your
              lightning balance.
            </div>
          </div>
          <div>
            <LinkButton to="/sub-wallets/new" className="mt-4">
              Create Sub-wallet
            </LinkButton>
          </div>
        </div>
      </div>
    </div>
  );
}