'use client';

import {useState, useEffect} from 'react';
import {motion} from 'framer-motion';
import {Heading, Text} from '@astryxdesign/core/Text';
import {BrandMark} from '@/shared/components/brand/BrandLogo';

const GREETINGS = [
  'How can Loyaly AI help today?',
  'What would you like to analyze today?',
  'Need insights from your business?',
  'What would you like to know?',
  'Ready to optimize your stores?',
  "Let's improve today's performance.",
  'Ask anything about your business.',
  'How can I help your team today?',
  "Need help understanding today's numbers?",
  'What should we explore today?',
];

const SUBTITLES = [
  'Ask anything about sales, stores, staff or rewards.',
  'Analyze your business with AI.',
  'Get instant answers from your retail data.',
  'Discover trends across all your stores.',
  'Find opportunities to improve performance.',
  'Your AI assistant for smarter retail decisions.',
];

export function EmptyState() {
  const [greeting, setGreeting] = useState(GREETINGS[0]);
  const [subtitle, setSubtitle] = useState(SUBTITLES[0]);

  useEffect(() => {
    const randomGreeting = GREETINGS[Math.floor(Math.random() * GREETINGS.length)];
    const randomSubtitle = SUBTITLES[Math.floor(Math.random() * SUBTITLES.length)];
    setGreeting(randomGreeting);
    setSubtitle(randomSubtitle);
  }, []);

  return (
    <div className="flex flex-col items-center text-center w-full max-w-xl mx-auto">
      {/* 1. Official Loyaly Heart Logo (56px desktop, 48px mobile) */}
      <div className="mb-6 flex justify-center">
        <BrandMark size={56} priority />
      </div>

      {/* 2. Dynamic Heading & Subtitle */}
      <motion.div
        key={greeting}
        initial={{opacity: 0, y: 8}}
        animate={{opacity: 1, y: 0}}
        transition={{duration: 0.25, ease: 'easeOut'}}
        className="flex flex-col items-center text-center"
      >
        <div className="mb-4">
          <Heading level={2} justify="center" className="text-xl sm:text-2xl font-semibold">
            {greeting}
          </Heading>
        </div>

        <div className="max-w-md mx-auto">
          <Text type="supporting" justify="center" className="text-sm">
            {subtitle}
          </Text>
        </div>
      </motion.div>
    </div>
  );
}
