import React from "react";
import { motion } from "framer-motion";
import { Search } from "lucide-react";

export function EmptyState({
  title = "No data found",
  description = "Try searching for a different stock symbol or adjust your filters.",
  icon: Icon = Search,
  action,
}) {
  return (
    <motion.div
      role="region"
      aria-label={title}
      initial={{ opacity: 0, y: 12 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.35, ease: [0.16, 1, 0.3, 1] }}
      style={{
        padding: "64px 32px",
        textAlign: "center",
        background: "linear-gradient(160deg, var(--bg-surface) 0%, var(--bg-elevated) 100%)",
        border: "1px solid var(--border)",
        borderRadius: "var(--radius-lg)",
        margin: "16px 0",
        position: "relative",
        overflow: "hidden",
      }}
    >
      {/* Subtle ambient radial glow */}
      <div
        aria-hidden="true"
        style={{
          position: "absolute",
          inset: 0,
          background:
            "radial-gradient(ellipse 60% 40% at 50% 0%, rgba(0,201,167,0.04) 0%, transparent 70%)",
          pointerEvents: "none",
        }}
      />

      {/* Animated icon container */}
      <div
        className="empty-state-icon"
        aria-hidden="true"
        style={{
          width: 64,
          height: 64,
          borderRadius: "50%",
          background: "linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-surface) 100%)",
          border: "1px solid var(--border-hover)",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          margin: "0 auto 20px",
          color: "var(--text-muted)",
          position: "relative",
          boxShadow: "0 0 0 8px rgba(255,255,255,0.02)",
        }}
      >
        {/* Outer glow ring */}
        <div
          style={{
            position: "absolute",
            inset: -6,
            borderRadius: "50%",
            border: "1px solid var(--border)",
            opacity: 0.35,
          }}
        />
        <Icon size={26} />
      </div>

      <h3
        style={{
          fontSize: 17,
          fontWeight: 700,
          color: "var(--text-primary)",
          marginBottom: 8,
          letterSpacing: "-0.01em",
          lineHeight: 1.3,
        }}
      >
        {title}
      </h3>

      <p
        style={{
          fontSize: 13.5,
          color: "var(--text-secondary)",
          maxWidth: 380,
          margin: "0 auto",
          lineHeight: 1.6,
        }}
      >
        {description}
      </p>

      {action && (
        <div style={{ marginTop: 24 }}>
          {action}
        </div>
      )}
    </motion.div>
  );
}

export default EmptyState;