import { useQuery } from "@tanstack/react-query";
import axios from "axios";

type Props = {
  url?: string;
};

export function TxtPreview({ url }: Props) {
  const { data, isLoading, error, isError } = useQuery({
    queryKey: ["file", url],
    queryFn: () => axios.get(url!, { responseType: "text" }),
    enabled: !!url,
  });

  if (!url) {
    return null;
  }

  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-full">
        <div>加载中...</div>
      </div>
    );
  }

  if (isError) {
    return (
      <div className="flex items-center justify-center h-full text-red-500">
        {error?.message || "加载失败"}
      </div>
    );
  }

  return (
    <div className="h-full overflow-auto p-4">
      <pre className="whitespace-pre-wrap font-mono text-sm">{data?.data}</pre>
    </div>
  );
}