import React from 'react';
import { MdInfoOutline } from 'react-icons/md';
import { formatAuthors } from '@/utils/book';

interface BookCardProps {
  cover: string;
  title: string;
  author: string;
}

const BookCard: React.FC<BookCardProps> = ({ cover, title, author }) => {
  return (
    <div className='flex h-20 w-full items-center'>
      <img
        src={cover}
        alt='Book cover'
        className='mr-4 aspect-auto max-h-20 w-[15%] max-w-14 rounded-sm object-cover shadow-md'
      />
      <div className='min-w-0 flex-1'>
        <h4 className='line-clamp-2 w-[90%] text-sm font-semibold'>{title}</h4>
        <p className='truncate text-sm text-gray-600'>{formatAuthors(author)}</p>
      </div>
      <button
        className='btn btn-ghost h-6 min-h-6 w-6 rounded-full p-0 transition-colors hover:bg-gray-300'
        aria-label='More info'
      >
        <MdInfoOutline size={18} className='text-gray-600' />
      </button>
    </div>
  );
};

export default BookCard;