import React from 'react';
import ArtistCard from './ArtistCard';
import { Artist, Epoch, Country } from '../types';

interface ArtistListProps {
  artists: Artist[];
  epochs: Epoch[];
  countries: Country[];
  onEdit: (artist: Artist) => void;
  onDelete: (id: string) => void;
}

const ArtistList: React.FC<ArtistListProps> = ({ artists, epochs, countries, onEdit, onDelete }) => {
  return (
    <div className="row row-cols-1 row-cols-md-3 g-4 mt-4">
      {artists.map(artist => (
        <ArtistCard 
          key={artist.id} 
          artist={artist} 
          epochs={epochs} 
          countries={countries} 
          onEdit={onEdit} 
          onDelete={onDelete} 
        />
      ))}
    </div>
  );
};

export default ArtistList;