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

const mockItems = [
  {
    title: 'Business Handshake',
    type: 'Videos',
    mediaType: 'video',
    image: '/v1.png',
    price: 0.49,
  },
  {
    title: 'Cowboy Howdy',
    type: 'Fonts',
    mediaType: 'font',
    image: '/v2.png',
    price: 4.99,
  },
  {
    title: 'SEPHORA',
    type: 'Images',
    mediaType: 'image',
    image: '/v3.png',
    price: 0.19,
  },
  {
    title: 'Gabe Hager',
    type: 'Videos',
    mediaType: 'video',
    image: '/v4.png',
    price: 9.99,
  },
  {
    title: 'Gabe Hager',
    type: 'Audios',
    mediaType: 'audio',
    image: '/v5.png',
    price: 3.99,
  },
  {
    title: 'Empty Flat Interior',
    type: 'Videos',
    mediaType: 'video',
    image: '/v6.png',
    price: 0.49,
  },
  {
    title: 'Black Swan',
    type: 'Images',
    mediaType: 'image',
    image: '/v7.png',
    price: 0.19,
  },
  {
    title: 'Panda',
    type: 'Fonts',
    mediaType: 'font',
    image: '/v8.png',
    price: 4.99,
  },
  {
    title: 'Lemon Garden',
    type: 'Images',
    mediaType: 'image',
    image: '/v9.png',
    price: 4.40,
  },
  {
    title: 'Wall Graphics',
    type: 'Graphics',
    mediaType: 'graphic',
    image: '/v10.png',
    price: 4.40,
  },
  {
    title: 'Wall Graphics',
    type: 'Graphics',
    mediaType: 'graphic',
    image: '/v11.png',
    price: 4.40,
  },
  {
    title: 'Wall Graphics',
    type: 'Graphics',
    mediaType: 'graphic',
    image: '/v12.png',
    price: 4.40,
  },
  {
    title: 'Wall Graphics',
    type: 'Graphics',
    mediaType: 'graphic',
    image: '/v13.png',
    price: 4.40,
  },
  {
    title: 'Wall Graphics',
    type: 'Graphics',
    mediaType: 'graphic',
    image: '/v14.png',
    price: 4.40,
  },
  {
    title: 'Wall Graphics',
    type: 'Graphics',
    mediaType: 'graphic',
    image: '/v15.png',
    price: 4.40,
  },
  
];

export default function ArtistContent() {
  return (
    <div className="w-full min-h-screen">
      <div className="w-full px-20 mx-auto">
        <div className="border-b-2 border-[#D1D5DB] mb-8" />
        {/* Header with greeting and filters inside a card */}
        <div className="bg-white p-3 rounded-lg shadow-sm py-5 w-full min-h-[46px] flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-8 border-b-2 border-[#D1D5DB]">
          {/* Greeting */}
          <div className="flex items-center text-[20px] sm:text-[22px]">
            <span className="font-[700] text-[#151C4F] mr-1 text-[16px]">Hi Daphne,</span>
            <span className="text-[#555979] font-[700] text-[16px] ">recommendations for you</span>
          </div>
          {/* Filter Chips */}
          <div className="flex flex-wrap gap-4">
            {['Images','Videos','Audios','Fonts','Gifs','Graphics'].map((filter) => (
              <label key={filter} className="flex items-center gap-2 text-[#151C4F] text-[13px] font-[400] cursor-pointer select-none">
                <Checkbox defaultChecked className="bg-white border-[#E3E6F0] data-[state=checked]:bg-white data-[state=checked]:border-[#151C4F] [&>svg]:text-[#151C4F] data-[state=checked]:text-[#151C4F]" />
                {filter}
              </label>
            ))}
          </div>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
          {mockItems.map((item, idx) => (
            <div
              key={idx}
              className="relative bg-white rounded-sm shadow-sm overflow-hidden group transition hover:shadow-md flex flex-col justify-between"
              style={{ width: 200, height: 178, gap: 9, borderRadius: 6, paddingBottom: 8 }}
            >
              {/* Image */}
              <div className="relative w-full h-36 flex items-center justify-center bg-gray-100">
                <Image
                  src={item.image}
                  alt={item.title}
                  fill
                  style={{ objectFit: 'cover' }}
                  className="transition group-hover:scale-105 duration-200"
                />
                {/* Play overlay for video/audio */}
                {(item.mediaType === 'video' || item.mediaType === 'audio') && (
                  <div className="absolute inset-0 flex items-center justify-center z-10">
                    <Image src="/play.png" alt="Play" width={48} height={48} className="drop-shadow-lg" />
                  </div>
                )}
              </div>
              {/* Card content */}
              <div className="px-3 pb-2 pt-1 flex flex-col gap-1">
                <div className="flex items-center justify-between">
                  <span className="font-semibold text-sm text-[#151C4F] truncate" title={item.title}>{item.title}</span>
                  <Button variant="ghost" size="icon" className="ml-2">
                    <Heart className="w-5 h-5 text-gray-400 group-hover:text-pink-500 transition" />
                  </Button>
                </div>
                <div className="flex items-center justify-between mt-0.5">
                  <span className="text-xs text-gray-500">In{' '}
                    <span className="capitalize" style={{ color: '#007AFF', fontWeight: 400, fontSize: 12 }}>{item.type}</span>
                  </span>
                  <span className="font-bold text-[#151C4F] text-sm">${item.price.toFixed(2)}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}