import { createFileRoute } from '@tanstack/react-router';
import { trpc } from '@/lib/trpc';

export const Route = createFileRoute('/')({
  component: HomePage,
});

function HomePage() {
  const pingQuery = trpc.health.ping.useQuery();

  return (
    <div className="flex flex-col items-center justify-center h-full gap-4">
      <div className="flex items-center gap-3">
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          className="text-foreground"
        >
          <path
            d="M12 2L13.5 8.5L20 10L13.5 11.5L12 18L10.5 11.5L4 10L10.5 8.5L12 2Z"
            fill="currentColor"
          />
        </svg>
        <h1 className="text-3xl font-semibold tracking-tight">
          Hello, Roberto
        </h1>
      </div>
      <p className="text-muted-foreground text-sm">
        Adiuva is ready. Start building.
      </p>
      {pingQuery.data && (
        <p className="text-xs text-muted-foreground">
          tRPC IPC bridge: {pingQuery.data}
        </p>
      )}
    </div>
  );
}