"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() {
  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-white/60 bg-linear-to-br from-primary to-gray-800 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>

            <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>
  );
}