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-8">
      <div className="container-main">
        <div className="flex items-center justify-between mb-2 px-2">
          <h2 className="text-[15px] font-[600] text-[#151C4F]">Best Sellers</h2>
          <a href="#" className="text-[#4F8CFF] 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-6 w-full" />
        <div className="flex gap-6 overflow-x-auto scrollbar-hide pb-2">
          {books.map((book) => (
            <div key={book.title} className="flex flex-col" style={{ minWidth: 158 }}>
              <div className="relative w-[158px] h-[235px] 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"
                />
              </div>
              <div className="px-1 pt-2 flex flex-col gap-1 w-[158px]">
                <div className="flex items-center justify-between">
                  <span className="font-[400] text-[14px] text-[#151C4F]" title={book.title}>{book.title}</span>
                  <Button variant="ghost" size="icon" className="ml-2">
                    <Heart className="w-5 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-[12px] text-[#555979] font-[400] whitespace-nowrap"><span className="capitalize">{book.author}</span></span>
                  <span className="font-[700] text-[#151C4F] text-[14px] whitespace-nowrap">{book.price}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}