import { Search } from "lucide-react";

interface SearchEmptyStateProps {
  query: string;
}

export function SearchEmptyState({ query }: SearchEmptyStateProps) {
  const displayQuery = query.length > 30 ? query.slice(0, 30) + "…" : query;

  return (
    <div className="flex flex-col items-center py-8 px-4 text-center">
      <Search className="mb-3 h-8 w-8 text-[#8aa9a8]" aria-hidden="true" />
      <p className="text-sm font-medium text-[#3d5554]">
        No results for &ldquo;{displayQuery}&rdquo;
      </p>
      <p className="mt-1 text-xs text-[#8aa9a8]">
        Try a different search term or browse categories
      </p>
    </div>
  );
}
