// Sample React + TypeScript component — samplefiles.com
import { useMemo, useState } from 'react';

type Customer = { id: number; name: string; balance: number };

export function CustomerTable({ customers }: { customers: Customer[] }) {
  const [query, setQuery] = useState('');
  const filtered = useMemo(
    () => customers.filter((c) => c.name.toLowerCase().includes(query.toLowerCase())),
    [customers, query],
  );

  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search" />
      <table>
        <tbody>
          {filtered.map((c) => (
            <tr key={c.id}>
              <td>{c.name}</td>
              <td>{c.balance.toFixed(2)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
}