import Image from 'next/image';
import { Heart, ChevronRight } from 'lucide-react';
import { Button } from '@/components/ui/button';

const books = [
  {
    title: 'Brutal',
    author: 'Hoosh Ink',
    price: '$4.99',
    cover: '/book1.png',
  },
  {
    title: 'Authority',
    author: 'Jeff Vandermeer',
    price: '$11.99',
    cover: '/book2.png',
  },
  {
    title: 'Babe Hager',
    author: 'Babe Hager',
    price: '$2.99',
    cover: '/book3.png',
  },
  {
    title: 'Never Flinch',
    author: 'Stephen King',
    price: '$16.99',
    cover: '/book4.png',
  },
  {
    title: 'The Obsession',
    author: 'Jesse Q. Sutanto',
    price: '$8.99',
    cover: '/book5.png',
  },
  {
    title: 'Unlikely Story',
    author: 'Ali Rosen',
    price: '$2.99',
    cover: '/book6.png',
  },
  {
    title: 'Thrill Ride',
    author: 'Amy Ratcliffe',
    price: '$9.99',
    cover: '/book7.png',
  },
];

export default function BestSeller() {
  return (
    <div className="w-full py-4 sm:py-6 md:py-8">
      <div className="container-main">
        <div className="flex items-center justify-between mb-2 px-2">
          <h2 className="text-[14px] sm:text-[15px] font-[600] text-[#151C4F]">Best Sellers</h2>
          <a href="#" className="text-[#4F8CFF] text-[14px] sm:text-[16px] font-[400] hover:underline flex items-center gap-1">See more <ChevronRight size={16} /></a>
        </div>
        <div className="border-b-2 border-[#D1D5DB] mb-4 sm:mb-6 w-full" />
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4 sm:gap-6">
          {books.map((book) => (
            <div key={book.title} className="flex flex-col w-full">
              <div className="relative w-full aspect-[2/3] flex items-center justify-center">
                <Image
                  src={book.cover}
                  alt={book.title}
                  fill
                  style={{ objectFit: 'cover', borderRadius: 4 }}
                  className="transition group-hover:scale-105 duration-200"
                  sizes="(max-width: 640px) 50vw, (max-width: 768px) 33vw, (max-width: 1024px) 25vw, (max-width: 1280px) 20vw, (max-width: 1536px) 16vw, 14vw"
                />
              </div>
              <div className="px-1 pt-2 flex flex-col gap-1 w-full">
                <div className="flex items-center justify-between">
                  <span className="font-[400] text-[12px] sm:text-[14px] text-[#151C4F] truncate" title={book.title}>{book.title}</span>
                  <Button variant="ghost" size="icon" className="ml-2">
                    <Heart className="w-4 h-4 sm:w-5 sm:h-5 text-gray-400 hover:text-pink-500 transition" />
                  </Button>
                </div>
                <div className="flex items-center justify-between mt-0.5">
                  <span className="text-[10px] sm:text-[12px] text-[#555979] font-[400] truncate"><span className="capitalize">{book.author}</span></span>
                  <span className="font-[700] text-[#151C4F] text-[12px] sm:text-[14px] whitespace-nowrap">{book.price}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
