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

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

const ArtistCard: React.FC<ArtistCardProps> = ({ artist, epochs, countries, onEdit, onDelete }) => {
  // Получаем имена эпохи и страны по идентификаторам
  const epochName = epochs.find(e => e.id === artist.epochId)?.name || 'Не указана';
  const countryName = countries.find(c => c.id === artist.countryId)?.name || 'Не указана';

  return (
    <div className="col-md-4 mb-4">
      <div className="card bg-dark border-punk">
        <div className="card-body">
          <h5 className="card-title text-punk">{artist.name}</h5>
          <p className="card-text text-light">{artist.description || 'Нет описания'}</p>
          <p className="card-text text-light"><small>Эпоха: {epochName}</small></p>
          <p className="card-text text-light"><small>Страна: {countryName}</small></p>
          <button 
            className="btn btn-outline-primary edit-btn me-2" 
            onClick={() => onEdit(artist)}
          >
            <i className="bi bi-pencil-square"></i> Изменить
          </button>
          <button 
            className="btn btn-outline-danger delete-btn" 
            onClick={() => onDelete(artist.id)}
          >
            <i className="bi bi-trash"></i> Удалить
          </button>
        </div>
      </div>
    </div>
  );
};

export default ArtistCard;