import AddIcon from '@/Components/Icons/AddIcon';
import AddStackIcon from '@/Components/Icons/AddStackIcon';
import PrimaryButton from '@/Components/PrimaryButton';
import Reproductor from '@/Components/Reproductor';
import SecondaryButton from '@/Components/SecondaryButton';
import Authenticated from '@/Layouts/AuthenticatedLayout';
import { useState } from 'react';

export default function Gallery() {
  const songs = [
    {
      id: 1,
      title: 'Song 1',
      artist: 'Artist 1',
      coverArt:
        'https://duckduckgo.com/?q=Metallica%20American%20heavy%20metal%20band&ia=images&iax=images',
    },
    {
      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);
  const [cancionSeleccionada, setCancion] = useState({ title: '' });
  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 className="mt-1 flex gap-1">
                    <PrimaryButton>
                      <AddIcon />
                    </PrimaryButton>
                    <SecondaryButton>
                      <AddStackIcon />
                    </SecondaryButton>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <Reproductor />
      </div>
    </Authenticated>
  );
}