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

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">
        <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-[var(--primary)]">
          <svg width="34" height="34" viewBox="0 0 24 24" fill="none">
            <path
              d="M12 3C6.98 3 3 6.58 3 11.1c0 2.5 1.28 4.73 3.28 6.24-.1.84-.46 1.87-1.02 2.66-.15.21.02.5.27.44 1.53-.34 2.92-1.03 3.9-1.73.82.18 1.68.29 2.57.29 5.02 0 9-3.58 9-8.1S17.02 3 12 3Z"
              fill="#fff"
            />
          </svg>
        </div>
        <div className="mt-4 text-base font-medium">{t("placeholder.title")}</div>
        <div className="mt-1 text-xs text-[var(--sub-text)]">
          {t("placeholder.subTitle")}
        </div>
      </div>
    </Layout>
  );
};
