import { Layout } from "antd";
import { useTranslation } from "react-i18next";

const LinearChatIcon = () => (
  <svg width="64" height="64" viewBox="0 0 24 24" fill="none">
    <path
      d="M5 6.5h14a1.5 1.5 0 0 1 1.5 1.5v8a1.5 1.5 0 0 1-1.5 1.5h-7.2L7 20.5v-2.5H5A1.5 1.5 0 0 1 3.5 16V8A1.5 1.5 0 0 1 5 6.5Z"
      stroke="var(--gap-text)"
      strokeWidth="1.6"
      strokeLinejoin="round"
    />
  </svg>
);

export const EmptyChat = () => {
  const { t } = useTranslation();

  return (
    <Layout className="no-mobile flex items-center justify-center bg-[var(--chat-bg)]">
      <div className="flex flex-col items-center">
        <LinearChatIcon />
        <div className="mt-4 text-base font-medium text-[var(--base-black)]">
          {t("placeholder.emptyChat")}
        </div>
      </div>
    </Layout>
  );
};