import React from 'react';
import { Client } from '../types';

interface Props {
  clients: Client[];
}

const ClientList: React.FC<Props> = ({ clients }) => {
  return (
    <div className="client-list">
      <h3>Clients ({clients.length})</h3>
      <div className="clients">
        {clients.slice(-5).reverse().map(client => (
          <div key={client.id} className="client-item">
            <div className="client-company">{client.company}</div>
            <div className="client-email">{client.email}</div>
            <div className="client-website">{client.website}</div>
            <div className="client-date">
              {new Date(client.createdAt).toLocaleDateString()}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ClientList;