import Reproductor from '@/Components/Reproductor';
import Authenticated from '@/Layouts/AuthenticatedLayout';
import { useState } from 'react';

export default function Gallery() {
  const songs = [
    {
      id: 1,
      title: 'Song 1',
      artist: 'Artist 1',
      coverArt: '/images/song1.jpg',
    },
    {
      id: 2,
      title: 'Song 2',
      artist: 'Artist 2',
      coverArt: '/images/song2.jpg',
    },
    {
      id: 3,
      title: 'Song 3',
      artist: 'Artist 3',
      coverArt: '/images/song3.jpg',
    },
  ];

  const [progress, setProgress] = useState(0);
  const [isPlaying, setIsPlaying] = useState(false);

  return (
    <Authenticated
      header={
        <h2 className="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
          Galeria Canciones
        </h2>
      }
    >
      <div className="py-12">
        <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {songs.map((song) => (
              <div
                key={song.id}
                className="overflow-hidden rounded-lg bg-white shadow-lg dark:bg-gray-800"
              >
                <img
                  src={song.coverArt}
                  alt={song.title}
                  className="h-48 w-full object-cover"
                />
                <div className="p-4">
                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                    {song.title}
                  </h3>
                  <p className="text-sm text-gray-600 dark:text-gray-300">
                    {song.artist}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
        <Reproductor />
      </div>
    </Authenticated>
  );
}