import { PresetQuery } from "@/components/search/preset-query";
import { Skeleton } from "@/components/search/skeleton";
import { Wrapper } from "@/components/search/wrapper";
import { Relate } from "@/types/relate";
import { MessageSquareQuote } from "lucide-react";
import { FC } from "react";

export const Relates: FC<{ relates: Relate[] | null }> = ({ relates }) => {
  return (
    <Wrapper
      title={
        <>
          <MessageSquareQuote></MessageSquareQuote> 相关
        </>
      }
      content={
        <div className="flex gap-2 flex-col">
          {relates !== null ? (
            relates.length > 0 ? (
              relates.map(({ question }) => (
                <PresetQuery key={question} query={question}></PresetQuery>
              ))
            ) : (
              <div className="text-sm">没有相关问题.</div>
            )
          ) : (
            <>
              <Skeleton className="w-full h-5 bg-zinc-200/80"></Skeleton>
              <Skeleton className="w-full h-5 bg-zinc-200/80"></Skeleton>
              <Skeleton className="w-full h-5 bg-zinc-200/80"></Skeleton>
            </>
          )}
          <div className="text-xs text-zinc-500 text-center mt-4">
            <div>VaalaAI回答完成后，您可以通过分享链接将回答分享给朋友！</div>
            <div>有效期20分钟</div>
          </div>
        </div>
      }
    ></Wrapper>
  );
};