"use client";

import Link from "next/link";
import { motion } from "framer-motion";
import { FileSearch } from "lucide-react";
import { useLanguage } from "@/context/language-context";

//salomalr

export default function EmptyState({page}:{page: string}) {
  const { t } = useLanguage();

  const container = {
    hidden: { opacity: 0, y: 8 },
    show: { opacity: 1, y: 0, transition: { staggerChildren: 0.06 } },
  };

  return (
    <motion.section
      aria-labelledby="empty-state-title"
      className="w-full px-4 py-16 flex items-center justify-center"
      initial="hidden"
      animate="show"
      variants={container}
    >
      <div className="max-w-5xl w-full bg-linear-to-br from-primary via-primary/50 to-gray-300 backdrop-blur-md rounded-2xl shadow-lg overflow-hidden">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-center p-8 md:p-12">
          {/* Illustration / Icon */}
          <motion.div className="flex items-center justify-center">
            <motion.div
              className="p-6 bg-linear-to-tr from-blue-50 to-blue-100 rounded-xl shadow-inner"
              initial={{ scale: 0.96 }}
              animate={{ scale: [0.96, 1.02, 0.98, 1] }}
              transition={{
                duration: 4,
                repeat: Infinity,
                repeatType: "mirror",
              }}
            >
              <FileSearch className="w-28 h-28 text-primary" />
            </motion.div>
          </motion.div>

          {/* Content */}
          <motion.div className="text-center md:text-left">
            <h3
              id="empty-state-title"
              className="text-2xl sm:text-3xl font-semibold text-gray-900 dark:text-gray-100"
            >
              {t.empty_data.title || "Hech narsa topilmadi"}
            </h3>

            <p className="mt-3 text-sm sm:text-base text-gray-600 dark:text-gray-300 max-w-xl mx-auto md:mx-0">
              {t.empty_data.description}
            </p>

            {page !== "main" && (
              <div className="mt-6 flex flex-col sm:flex-row items-center sm:items-start gap-3 md:gap-4 justify-center md:justify-start">
                <motion.div
                  className="inline-flex items-center justify-center px-5 py-2.5 bg-primary/70 hover:bg-primary text-white rounded-lg shadow-md transition-colors text-sm font-medium"
                  // @ts-ignore allow Link-like anchor
                >
                  <Link href="/">{t.empty_data.back || "Bosh sahifa"}</Link>
                </motion.div>
              </div>
            )}
          </motion.div>
        </div>
      </div>
    </motion.section>
  );
}
