import React, { useCallback } from "react";

interface SearchEmptyStateProps {
  query: string;
  onReset: () => void;
}

export function SearchEmptyState({ query, onReset }: SearchEmptyStateProps) {
  const handleReset = useCallback(() => {
    onReset();
  }, [onReset]);

  const queryDisplay = query.trim();
  const hasQuery = queryDisplay.length > 0;

  return (
    <div
      data-testid="search-empty-state"
      role="region"
      aria-label="No results found"
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        minHeight: "240px",
        padding: "32px 16px",
        textAlign: "center",
        color: "#4a5568",
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
      }}
    >
      <svg
        width="48"
        height="48"
        viewBox="0 0 24 24"
        fill="none"
        stroke="#a0aec0"
        strokeWidth="1.5"
        aria-hidden="true"
        style={{ marginBottom: "16px" }}
      >
        <circle cx="11" cy="11" r="8" />
        <line x1="21" y1="21" x2="16.65" y2="16.65" />
      </svg>

      <h2 style={{ margin: "0 0 8px 0", fontSize: "18px", fontWeight: 600, color: "#2d3748" }}>
        No records found
      </h2>

      <p style={{ margin: "0 0 24px 0", fontSize: "14px", lineHeight: "1.5", maxWidth: "400px" }}>
        {hasQuery ? (
          <>
            No patient records match{" "}
            <strong style={{ color: "#2d3748" }}>"{queryDisplay}"</strong>.
          </>
        ) : (
          <>Enter a patient name, MRN, or identifier to begin searching.</>
        )}
      </p>

      <button
        type="button"
        onClick={handleReset}
        data-testid="search-reset-button"
        style