import React, { useCallback } from "react";

interface EmptySearchResultsProps {
  onReset: () => void;
}

export function EmptySearchResults({ onReset }: EmptySearchResultsProps): React.ReactElement {
  const handleReset = useCallback(() => {
    onReset();
  }, [onReset]);

  return (
    <div
      role="region"
      aria-label="No search results"
      style={{
        padding: "24px 16px",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        gap: "12px",
        textAlign: "center",
      }}
    >
      <p
        style={{
          margin: 0,
          fontSize: "16px",
          fontWeight: 600,
          color: "#1a1a1a",
        }}
      >
        No records match your search
      </p>
      <p
        style={{
          margin: 0,
          fontSize: "14px",
          color: "#4a4a4a",
          maxWidth: "420px",
          lineHeight: 1.5,
        }}
      >
        Try a different patient name, MRN, or date range. If you are certain
        the record exists, check with your records administrator.
      </p>
      <button
        type="button"
        onClick={handleReset}
        style={{
          marginTop: "8px",
          padding: "8px 20px",
          fontSize: "14px",
          fontWeight: 500,
          background: "#0052cc",
          color: "#ffffff",
          border: "none",
          borderRadius: "4px",
          cursor: "pointer",
        }}
      >
        Clear search
      </button>
    </div>
  );
}