import { useI18n } from '../../i18n';

export default function ChatEmptyState() {
  const { t } = useI18n();

  const suggestions = [
    {
      key: 'task',
      title: t('conversation.emptyState.suggestions.task.title'),
    },
    {
      key: 'continuous',
      title: t('conversation.emptyState.suggestions.continuous.title'),
    },
    {
      key: 'parallel',
      title: t('conversation.emptyState.suggestions.parallel.title'),
    },
  ] as const;

  return (
    <div className="flex min-h-full items-center justify-center">
      <div className="flex w-full max-w-4xl flex-col items-center justify-center text-center">
        <div className="h-[clamp(280px,48vh,520px)] w-full px-6 dark:bg-[radial-gradient(circle_at_top,rgba(49,73,109,0.24)_0%,rgba(24,24,27,0)_60%)]">
          <div className="mx-auto flex h-full max-w-3xl flex-col items-center justify-center">
            <h2
              className="text-[clamp(40px,7vw,72px)] font-medium leading-[1.1] tracking-[-0.05em] text-[#2F3542] dark:text-[#E5E7EB]"
              style={{ fontFamily: 'Georgia, "Songti SC", "STSong", serif' }}
            >
              {t('conversation.emptyState.title')}
            </h2>

            <div className="mt-9 flex max-w-3xl flex-wrap items-center justify-center gap-3">
              {suggestions.map((suggestion) => (
                <div
                  key={suggestion.key}
                  className="rounded-full border border-[#D8DEE8] bg-white/78 px-6 py-2 text-[15px] font-semibold text-[#4B5563] shadow-[0_8px_20px_rgba(15,23,42,0.04)] dark:border-[#3a3a40] dark:bg-[#202024] dark:text-gray-300"
                >
                  {suggestion.title}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}