import { createFileRoute, Link } from "@tanstack/react-router";
import { ActionScreen } from "@/components/bkash/ActionScreen";
import {
  Send, ArrowDownToLine, Smartphone, Zap, CreditCard, Plus, QrCode, ScanLine,
  Receipt, Heart, GraduationCap, ShoppingBag, FileText, User, Shield, HelpCircle,
} from "lucide-react";

export const Route = createFileRoute("/_authenticated/more")({
  component: MorePage,
});

const items: Array<{ icon: any; label: string; to: string }> = [
  { icon: Send, label: "সেন্ড মানি", to: "/send" },
  { icon: ArrowDownToLine, label: "ক্যাশ আউট", to: "/cash-out" },
  { icon: Smartphone, label: "মোবাইল রিচার্জ", to: "/recharge" },
  { icon: CreditCard, label: "পেমেন্ট", to: "/payment" },
  { icon: Zap, label: "পে বিল", to: "/pay-bill" },
  { icon: Plus, label: "অ্যাড মানি", to: "/add-money" },
  { icon: Receipt, label: "রিকোয়েস্ট মানি", to: "/request-money" },
  { icon: QrCode, label: "আমার QR", to: "/qr" },
  { icon: ScanLine, label: "QR স্ক্যান", to: "/scan" },
  { icon: GraduationCap, label: "শিক্ষা ফি", to: "/pay-bill" },
  { icon: Heart, label: "ডোনেশন", to: "/payment" },
  { icon: ShoppingBag, label: "শপিং", to: "/payment" },
  { icon: FileText, label: "স্টেটমেন্ট", to: "/statement" },
  { icon: Shield, label: "নিরাপত্তা ও পিন", to: "/change-pin" },
  { icon: HelpCircle, label: "সাহায্য কেন্দ্র", to: "/help-center" },
  { icon: User, label: "অ্যাকাউন্ট", to: "/account" },
];

function MorePage() {
  return (
    <ActionScreen title="সকল সেবা">
      <div className="bg-card rounded-2xl p-3 shadow-[var(--shadow-card)] grid grid-cols-4 gap-y-4 gap-x-1">
        {items.map((it) => (
          <Link key={it.label} to={it.to} className="flex flex-col items-center gap-1.5 py-2 active:scale-95 transition-transform">
            <div className="h-12 w-12 rounded-2xl bg-accent flex items-center justify-center">
              <it.icon className="h-5 w-5 text-primary" strokeWidth={2.2} />
            </div>
            <span className="text-[10.5px] font-medium text-center leading-tight text-foreground/80 px-0.5">{it.label}</span>
          </Link>
        ))}
      </div>
    </ActionScreen>
  );
}