// src/components/trade/TradeSend.tsx
import {
  IonCard,
  IonCardContent,
  IonInput,
  IonItem,
  IonLabel,
  IonButton,
  IonGrid,
  IonRow,
  IonCol,
  useIonRouter,
  IonSelect,
  IonSelectOption,
  IonIcon,
  IonModal,
  IonContent,
} from "@ionic/react";
import { alertCircle, copyOutline, closeOutline, sendOutline, warningOutline } from "ionicons/icons";
import { useState, useRef } from "react";
import { Context } from "../../../context/contex";
import { shortenAddress, hasCurrency } from "../../../utils/index";

type BuyCryptoProps = {
  context: NonNullable<React.ContextType<typeof Context>>;
};

interface TokenDetails {
  currency: string;
  balance: number;
  chain: string;
  deposit_address: string;
  fee?: any;
}

const tokens = [
  { name: "Bitcoin", symbol: "btc", chains: ["btc"] },
  { name: "Litecoin", symbol: "ltc", chains: ["ltc"] },
  { name: "Ethereum", symbol: "eth", chains: ["erc20", "bep20"] },
  { name: "Solana", symbol: "sol", chains: ["bep20"] },
  { name: "USDC", symbol: "usdc", chains: ["bep20", "trc20", "erc20"] },
  { name: "USDT", symbol: "usdt", chains: ["bep20", "trc20", "erc20"] },
];

const tokenIcons: Record<string, string> = {
  btc: "₿", ltc: "Ł", eth: "Ξ", sol: "◎", usdc: "$", usdt: "₮",
};

const STYLES = `
  .snd-page {
    --snd-bg: #07090f;
    --snd-surface: #0e1420;
    --snd-surface2: #131c2e;
    --snd-border: rgba(255,255,255,0.09);
    --snd-accent: #3b82f6;
    --snd-green: #10b981;
    --snd-gold: #f59e0b;
    --snd-red: #ef4444;
    --snd-text: #f1f5f9;
    --snd-bright: #ffffff;
    --snd-muted: #d7daddff;
    background: var(--snd-bg);
    min-height: 100%;
    padding: 20px 14px 48px;
  }

  /* ── Header ── */
  .snd-header {
    margin-bottom: 24px;
  }
  .snd-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--snd-accent);
    margin-bottom: 6px;
  }
  .snd-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--snd-bright);
    margin: 0 0 6px;
    letter-spacing: -0.02em;
  }
  .snd-subtitle {
    font-size: 14px;
    color: var(--snd-muted);
    margin: 0;
  }

  /* ── Main card ── */
  .snd-card {
    --background: #0e1420;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px !important;
    margin: 0;
    box-shadow: none;
  }
  .snd-card > ion-card-content { padding: 0; }

  .snd-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.09);
    background: #131c2e;
    border-radius: 14px 14px 0 0;
  }
  .snd-card-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #e7eaecff;
  }
  .snd-card-badge {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(59,130,246,0.14);
    color: #60a5fa;
  }

  .snd-form-pad { padding: 16px; }

  /* ── IonItem ── */
  .snd-item {
    --background: #07090f;
    --background-focused: #07090f;
    --background-hover: #07090f;
    --border-color: rgba(255,255,255,0.09);
    --border-width: 1px;
    --border-radius: 10px;
    --inner-border-width: 0;
    --padding-start: 14px;
    --padding-end: 14px;
    --padding-top: 6px;
    --padding-bottom: 6px;
    --highlight-color-focused: #3b82f6;
    --highlight-height: 2px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
  }
  .snd-item ion-label {
    --color: #ced1d6ff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    margin-bottom: 2px !important;
  }
  .snd-item ion-input {
    --color: #f1f5f9;
    --placeholder-color: #dddfe2ff;
    font-size: 15px;
  }
  .snd-item ion-select {
    --color: #f1f5f9;
    --placeholder-color: #dbdee1ff;
    font-size: 14px;
    width: 100%;
  }

  /* ── Token detail card ── */
  .snd-token-card {
    --background: #07090f;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 12px !important;
    margin: 0 0 16px;
    box-shadow: none;
  }
  .snd-token-card > ion-card-content { padding: 14px; }

  .snd-tok-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
  }
  .snd-tok-left { display: flex; align-items: center; gap: 10px; }
  .snd-tok-icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #131c2e;
    border: 1px solid rgba(255,255,255,0.09);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    color: #60a5fa;
    flex-shrink: 0;
  }
  .snd-tok-name {
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
  }
  .snd-tok-chain {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #dcdfe3ff;
    margin-top: 2px;
  }
  .snd-tok-bal { text-align: right; }
  .snd-tok-bal-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #d8dee7ff;
  }
  .snd-tok-bal-value {
    font-size: 18px;
    font-weight: 800;
    color: #f59e0b;
    line-height: 1.2;
  }
  .snd-tok-bal-sym {
    font-size: 14px;
    font-weight: 700;
    color: #dee1e5ff;
    margin-left: 3px;
  }

  /* ── Divider ── */
  .snd-divider {
    height: 1px;
    background: rgba(255,255,255,0.09);
    margin: 0 0 14px;
  }

  /* ── Amount row ── */
  .snd-amt-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 12px;
  }
  .snd-amt-row .snd-item { flex: 1; margin-bottom: 0; }
  .snd-max-btn {
    --background: rgba(245,158,11,0.1);
    --background-activated: rgba(245,158,11,0.2);
    --color: #fbbf24;
    --border-radius: 10px;
    --border-width: 1px;
    --border-style: solid;
    --border-color: rgba(245,158,11,0.28);
    --box-shadow: none;
    --padding-start: 14px;
    --padding-end: 14px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    align-self: stretch;
    margin: 0;
  }

  /* ── Fee hint ── */
  .snd-fee-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(245,158,11,0.07);
    border: 1px solid rgba(245,158,11,0.18);
    border-radius: 8px;
    margin-bottom: 14px;
  }
  .snd-fee-hint-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #f59e0b;
    flex-shrink: 0;
  }
  .snd-fee-hint-text {
    font-size: 14px;
    font-weight: 600;
    color: #fcd34d;
  }
  .snd-fee-hint-text span { color: #ffffff; font-weight: 800; }

  /* ── Review button ── */
  .snd-review-btn {
    --background: #3b82f6;
    --background-activated: #2563eb;
    --color: #ffffff;
    --border-radius: 10px;
    --box-shadow: 0 4px 20px rgba(59,130,246,0.28);
    --padding-top: 14px;
    --padding-bottom: 14px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
  }
  .snd-review-btn[disabled] {
    --background: #1e293b;
    --color: #b6b9bcff;
    --box-shadow: none;
  }

  /* ══════════════ MODAL ══════════════ */
  .snd-modal {
    --background: #07090f;
    --border-radius: 20px 20px 0 0;
  }

  .snd-modal-inner {
    background: #07090f;
    padding: 0 0 40px;
    min-height: 100%;
  }

  /* Drag handle */
  .snd-modal-handle {
    width: 36px; height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.15);
    margin: 12px auto 0;
  }

  /* Modal header */
  .snd-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 0;
    margin-bottom: 24px;
  }
  .snd-modal-head-left {}
  .snd-modal-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #f59e0b;
    margin-bottom: 4px;
  }
  .snd-modal-title {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.02em;
  }
  .snd-modal-close {
    --background: rgba(255,255,255,0.06);
    --background-activated: rgba(255,255,255,0.1);
    --color: #d6d8daff;
    --border-radius: 50%;
    --box-shadow: none;
    --padding-start: 10px;
    --padding-end: 10px;
    --padding-top: 10px;
    --padding-bottom: 10px;
    width: 36px;
    height: 36px;
    margin: 0;
  }

  /* Modal amount hero */
  .snd-modal-hero {
    margin: 0 20px 24px;
    padding: 20px;
    background: #0e1420;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    text-align: center;
  }
  .snd-modal-hero-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #d1d6ddff;
    margin-bottom: 8px;
  }
  .snd-modal-hero-amount {
    font-size: 36px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 4px;
  }
  .snd-modal-hero-sym {
    font-size: 14px;
    font-weight: 700;
    color: #60a5fa;
    letter-spacing: 0.1em;
  }

  /* Modal rows */
  .snd-modal-rows {
    margin: 0 20px 20px;
    background: #0e1420;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 12px;
    overflow: hidden;
  }
  .snd-modal-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    gap: 12px;
  }
  .snd-modal-row:last-child { border-bottom: none; }
  .snd-mr-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #d3d8dfff;
    white-space: nowrap;
    padding-top: 1px;
  }
  .snd-mr-value {
    font-size: 1px;
    font-weight: 700;
    color: #f1f5f9;
    text-align: right;
    word-break: break-all;
  }
  .snd-mr-value.green { color: #34d399; font-size: 15px; font-weight: 800; }
  .snd-mr-value.gold  { color: #fcd34d; }
  .snd-mr-value.red   { color: #f87171; }
  .snd-mr-value.mono  { font-family: monospace; font-size: 14px; color: #cccfd2ff; }

  /* Receive highlight row */
  .snd-modal-row-receive {
    background: rgba(16,185,129,0.06);
  }

  /* Warning box */
  .snd-modal-warn {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 20px 20px;
    padding: 12px 14px;
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.25);
    border-radius: 10px;
  }
  .snd-modal-warn-icon {
    font-size: 16px;
    color: #f87171;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .snd-modal-warn-text {
    font-size: 14px;
    font-weight: 600;
    color: #fca5a5;
    line-height: 1.5;
  }

  /* Modal PIN */
  .snd-modal-pin-wrap { margin: 0 20px 20px; }
  .snd-modal-pin-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #d5d7daff;
    margin-bottom: 8px;
    display: block;
  }

  /* Modal actions */
 .snd-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 20px;
    margin-bottom: calc(50px + env(safe-area-inset-bottom));

}
  .snd-send-btn {
    --background: #10b981;
    --background-activated: #059669;
    --color: #ffffff;
    --border-radius: 10px;
    --box-shadow: 0 4px 20px rgba(16,185,129,0.25);
    --padding-top: 14px;
    --padding-bottom: 14px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
  }
  .snd-send-btn[disabled] {
    --background: #1e293b;
    --color: #c2c7ceff;
    --box-shadow: none;
  }
  .snd-cancel-btn {
    --background: transparent;
    --background-activated: rgba(255,255,255,0.04);
    --color: #d5d8ddff;
    --border-radius: 10px;
    --border-width: 1px;
    --border-style: solid;
    --border-color: rgba(255,255,255,0.09);
    --box-shadow: none;
    --padding-top: 14px;
    --padding-bottom: 14px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
  }
`;

const Send: React.FC<BuyCryptoProps> = ({ context }) => {
  const {
    userInfo,
    userWallets,
    apiRequest,
    getUserWallets,
    getUserWalletsGroup,
    presentToast,
  } = context;

  const [tokenDetails, setTokenDetails] = useState<TokenDetails | null>(null);
  const [wallet, setWallet] = useState("");
  const [pin, setPin] = useState<number | string>("");
  const [amount, setAmount] = useState("");
  const [showModal, setShowModal] = useState(false);
  const modal = useRef<HTMLIonModalElement>(null);
  const router = useIonRouter();

  const feeValue: number = (() => {
    if (!tokenDetails) return 0;
    const f = (tokenDetails as any).fee;
    if (Array.isArray(f)) return parseFloat(f[0]?.value ?? "0");
    return parseFloat(f ?? "0");
  })();

  const receiveAmount: number = Math.max(0, parseFloat(amount || "0") - feeValue);

  const cancelOrder = () => {
    setWallet("");
    setAmount("");
    setTokenDetails(null);
    setPin("");
    setShowModal(false);
  };

  const getQuidaxWalletBalance = async (token: string, chain: string) => {
    if (!userInfo) { router.push("/login", "forward", "replace"); return; }
    setTokenDetails(null);
    setAmount("");
    const data = await apiRequest("POST", "", {
      action: "get_quidax_single_wallet",
      id: userInfo.id.toString(),
      token,
      chain,
    }, true, false) as any;
    if (data?.success) setTokenDetails(data.message);
  };

  const sendCrypto = async () => {
    if (!userInfo) return;
    if (!tokenDetails || Object.keys(tokenDetails).length === 0)
      return presentToast("top", "Invalid token", () => null, "danger", alertCircle);
    if (userInfo.quidax_id === null)
      return presentToast("top", "Crypto trading is not enabled on your account.", () => null, "danger", alertCircle);
    if (!amount || !wallet)
      return presentToast("top", "Invalid amount or wallet.", () => null, "danger", alertCircle);
    if (userInfo?.tx_pin === null)
      return presentToast("top", "Please set a transaction PIN", () => null, "danger", alertCircle);
    if (+pin !== +userInfo.tx_pin)
      return presentToast("top", "Incorrect PIN.", () => null, "danger", alertCircle);

    const data = await apiRequest("POST", "", {
      action: "send_crypto",
      id: userInfo.id.toString(),
      amount: receiveAmount.toString(),
      chain: tokenDetails.chain,
      currency: tokenDetails.currency,
      wallet,
    }, true, true) as any;

    if (data?.success) {
      cancelOrder();
      await getUserWallets(userInfo.id);
      await getUserWalletsGroup(userInfo.id);
    }
  };

  const canReview = !!(tokenDetails && wallet && amount && +amount > 0 && +amount <= tokenDetails.balance);

  return (
    <>
      <style>{STYLES}</style>

      <div className="snd-page">

        {/* Header */}
        <div className="snd-header">
          <div className="snd-eyebrow">Crypto Transfer</div>
          <h2 className="snd-title">Send Crypto Assets</h2>
          <p className="snd-subtitle">Transfer tokens directly from your wallet</p>
        </div>

        <IonCard className="snd-card">
          <IonCardContent>
            <div className="snd-card-head">
              <span className="snd-card-title">Transfer Details</span>
              <span className="snd-card-badge">On-Chain Send</span>
            </div>

            <div className="snd-form-pad">

              {/* Token selector */}
              <IonItem lines="none" className="snd-item">
                <IonLabel position="stacked">Select Token &amp; Network</IonLabel>
                <IonSelect
                  interface="action-sheet"
                  placeholder="Choose token to send"
                  onIonChange={(e) => {
                    const [symbol, chain] = e.detail.value.split(":");
                    getQuidaxWalletBalance(symbol, chain);
                  }}
                >
                  {tokens
                    .filter(({ symbol }) => hasCurrency(userWallets, symbol))
                    .flatMap(({ name, symbol, chains }) =>
                      chains.map((chain) => (
                        <IonSelectOption key={`${symbol}-${chain}`} value={`${symbol}:${chain}`}>
                          {tokenIcons[symbol]} {name} · {chain.toUpperCase()}
                        </IonSelectOption>
                      ))
                    )}
                </IonSelect>
              </IonItem>

              {/* Token detail */}
              {tokenDetails && (
                <IonCard className="snd-token-card">
                  <IonCardContent>
                    <div className="snd-tok-top">
                      <div className="snd-tok-left">
                        <div className="snd-tok-icon">
                          {tokenIcons[tokenDetails.currency.toLowerCase()] ?? tokenDetails.currency[0].toUpperCase()}
                        </div>
                        <div>
                          <div className="snd-tok-name">{tokenDetails.currency.toUpperCase()}</div>
                          <div className="snd-tok-chain">{tokenDetails.chain}</div>
                        </div>
                      </div>
                      <div className="snd-tok-bal">
                        <div className="snd-tok-bal-label">Available</div>
                        <div className="snd-tok-bal-value">
                          {tokenDetails.balance}
                          <span className="snd-tok-bal-sym">{tokenDetails.currency.toUpperCase()}</span>
                        </div>
                      </div>
                    </div>

                    <div className="snd-divider" />

                    {/* Recipient wallet */}
                    <IonItem lines="none" className="snd-item">
                      <IonLabel position="stacked">Recipient Wallet Address</IonLabel>
                      <IonInput
                        value={wallet}
                        placeholder="Paste destination address"
                        onIonInput={(e) => setWallet(e.detail.value!)}
                      />
                    </IonItem>

                    {/* Amount */}
                    <div className="snd-amt-row">
                      <IonItem lines="none" className="snd-item">
                        <IonLabel position="stacked">Amount to Send</IonLabel>
                        <IonInput
                          type="number"
                          min="0"
                          value={amount}
                          placeholder="0.00"
                          onIonInput={(e) => setAmount(e.detail.value!)}
                        />
                      </IonItem>
                      <IonButton
                        className="snd-max-btn"
                        onClick={() => setAmount(tokenDetails.balance.toString())}
                      >
                        MAX
                      </IonButton>
                    </div>

                    {/* Fee hint */}
                    {feeValue > 0 && (
                      <div className="snd-fee-hint">
                        <div className="snd-fee-hint-dot" />
                        <span className="snd-fee-hint-text">
                          Network fee: <span>{feeValue} {tokenDetails.currency.toUpperCase()}</span>
                          {amount && +amount > 0 && (
                            <> · You receive: <span>{receiveAmount.toFixed(6)} {tokenDetails.currency.toUpperCase()}</span></>
                          )}
                        </span>
                      </div>
                    )}

                    {/* Review button */}
                    <IonButton
                      expand="block"
                      className="snd-review-btn"
                      disabled={!canReview}
                      onClick={() => setShowModal(true)}
                    >
                      Review Transfer →
                    </IonButton>

                  </IonCardContent>
                </IonCard>
              )}

            </div>
          </IonCardContent>
        </IonCard>
      </div>

      {/* ══════════════ CONFIRMATION MODAL ══════════════ */}
      <IonModal
        ref={modal}
        isOpen={showModal}
        initialBreakpoint={0.92}
        breakpoints={[0, 0.92]}
        onDidDismiss={() => setShowModal(false)}
        className="snd-modal"
      >
        <IonContent className="snd-modal">
          <div className="snd-modal-inner">

            <div className="snd-modal-handle" />

            {/* Modal header */}
            <div className="snd-modal-head">
              <div className="snd-modal-head-left">
                <div className="snd-modal-eyebrow">Confirm Transfer</div>
                <h3 className="snd-modal-title">Review &amp; Send</h3>
              </div>
              <IonButton fill="clear" className="snd-modal-close" onClick={() => setShowModal(false)}>
                <IonIcon icon={closeOutline} />
              </IonButton>
            </div>

            {/* Amount hero */}
            <div className="snd-modal-hero">
              <div className="snd-modal-hero-label">You are sending</div>
              <div className="snd-modal-hero-amount">{parseFloat(amount || "0").toFixed(6)}</div>
              <div className="snd-modal-hero-sym">{tokenDetails?.currency?.toUpperCase()}</div>
            </div>

            {/* Detail rows */}
            <div className="snd-modal-rows">
              <div className="snd-modal-row">
                <span className="snd-mr-label">Network</span>
                <span className="snd-mr-value">{tokenDetails?.chain?.toUpperCase()}</span>
              </div>
              <div className="snd-modal-row">
                <span className="snd-mr-label">To Address</span>
                <span className="snd-mr-value mono">{wallet}</span>
              </div>
              <div className="snd-modal-row">
                <span className="snd-mr-label">Amount Sent</span>
                <span className="snd-mr-value gold">
                  {parseFloat(amount || "0").toFixed(6)} {tokenDetails?.currency?.toUpperCase()}
                </span>
              </div>
              <div className="snd-modal-row">
                <span className="snd-mr-label">Network Fee</span>
                <span className="snd-mr-value red">
                  − {feeValue} {tokenDetails?.currency?.toUpperCase()}
                </span>
              </div>
              <div className="snd-modal-row snd-modal-row-receive">
                <span className="snd-mr-label">Recipient Gets</span>
                <span className="snd-mr-value green">
                  {receiveAmount.toFixed(6)} {tokenDetails?.currency?.toUpperCase()}
                </span>
              </div>
            </div>

            {/* Warning */}
            <div className="snd-modal-warn">
              <IonIcon icon={warningOutline} className="snd-modal-warn-icon" />
              <span className="snd-modal-warn-text">
                This transaction is irreversible. Double-check the destination address before confirming.
              </span>
            </div>

            {/* PIN */}
            <div className="snd-modal-pin-wrap">
              <span className="snd-modal-pin-label">🔐 Enter Transaction PIN to Confirm</span>
              <IonItem lines="none" className="snd-item">
                <IonInput
                  type="password"
                  maxlength={4}
                  placeholder="••••"
                  value={pin}
                  onIonInput={(e) => setPin(e.detail.value!)}
                />
              </IonItem>
            </div>

            {/* Actions */}
            <div className="snd-modal-actions">
              <IonButton
                expand="block"
                className="snd-send-btn"
                disabled={!pin || String(pin).length < 4}
                onClick={sendCrypto}
              >
                <IonIcon slot="start" icon={sendOutline} />
                Send Now
              </IonButton>
              <IonButton
                expand="block"
                className="snd-cancel-btn"
                onClick={() => setShowModal(false)}
              >
                Go Back
              </IonButton>
            </div>

          </div>
        </IonContent>
      </IonModal>
    </>
  );
};

export default Send;