import { createFileRoute, Link } from "@tanstack/react-router";
import { LstCard } from "../../../../components/ui/lstCard";
import {
    CardContent,
    CardHeader,
    CardTitle,
} from "../../../../components/ui/card";
import { Button } from "../../../../components/ui/button";
import { cn } from "../../../../lib/utils";

export const Route = createFileRoute("/_mobile/_mobileLayout/m/")({
    component: RouteComponent,
});

const commands = [
    {
        title: "Relocate",
        description: "Moves a pallet from one location to another",
        link: "/lst/app/m/relocate",
    },
    {
        title: "Cycle Counts",
        description: "Will do a cycle count on a specific lane",
        link: "/lst/app/m/cyclecounts",
    },
    {
        title: "Delivery",
        description:
            "Scan pallets to a delivery that has already been drag down in stock",
        link: "/lst/app/m/delivery",
    },
];

function RouteComponent() {
    return (
        <div className="p-3 space-y-3">
            <LstCard>
                <CardHeader>
                    <CardTitle className="flex justify-center">
                        Commands
                    </CardTitle>
                </CardHeader>
                <CardContent>
                    <div className="flex flex-wrap justify-center gap-3">
                        {commands.map((cmd) => {
                            return (
                                <Link
                                    key={cmd.title}
                                    to={cmd.link}
                                    className="block"
                                >
                                    <Button
                                        variant="outline"
                                        className={cn(
                                            "flex flex-col justify-center items-center",
                                            "w-36 h-28 p-3 text-center", // fixed width/height for uniform grid
                                            "border-muted bg-background hover:bg-accent/40",
                                            "transition-all active:scale-95"
                                        )}
                                    >
                                        <span className="text-base font-semibold leading-tight">
                                            {cmd.title}
                                        </span>
                                        {/* <div className="max-w-[75px]">
                                            <span className="text-xs text-wrap">
                                                {cmd.description}
                                            </span>
                                        </div> */}
                                    </Button>
                                </Link>
                            );
                        })}
                    </div>
                </CardContent>
            </LstCard>
        </div>
    );
}
