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: '/book8.png',
  },
  {
    title: 'Authority',
    author: 'Jeff Vandermeer',
    price: '$11.99',
    cover: '/book9.png',
  },
  {
    title: 'Babe Hager',
    author: 'Babe Hager',
    price: '$2.99',
    cover: '/book10.png',
  },
  {
    title: 'Never Flinch',
    author: 'Stephen King',
    price: '$16.99',
    cover: '/book11.png',
  },
  {
    title: 'The Obsession',
    author: 'Jesse Q. Sutanto',
    price: '$8.99',
    cover: '/book12.png',
  },
  {
    title: 'Unlikely Story',
    author: 'Ali Rosen',
    price: '$2.99',
    cover: '/book13.png',
  },
  {
    title: 'Thrill Ride',
    author: 'Amy Ratcliffe',
    price: '$9.99',
    cover: '/book14.png',
  },
];

export default function NewRelease() {
  return (
    <div className="w-full py-4 md:py-8">
      <div className="container-main">
        <div className="flex items-center justify-between mb-2 px-2">
          <h2 className="text-[14px] md:text-[15px] font-[600] text-[#151C4F]">New Release</h2>
          <a href="#" className="text-[#4F8CFF] text-[14px] md: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 md: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 gap-4 md: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"
                />
              </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] md: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 md:w-5 md: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] md:text-[12px] text-[#555979] font-[400] truncate"><span className="capitalize">{book.author}</span></span>
                  <span className="font-[700] text-[#151C4F] text-[12px] md:text-[14px] whitespace-nowrap">{book.price}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}