import { Box, Flex, Text } from "@chakra-ui/react";
import { Song } from "../types/interfaces";
import { ChangeEvent } from "react";

interface SongListProps {
  songs: Song[];
  onAddToPlaylist: (songId: string, playlistName: string) => void;
  playlists: { name: string }[];
}

export const SongList: React.FC<SongListProps> = ({ songs, onAddToPlaylist, playlists }) => {
  return (
    <Flex direction="column" gap={2}>
      {songs.map((song) => (
        <Box key={song.id} borderWidth="1px" borderRadius="md" p={2} shadow="sm">
          <Flex justify="space-between" align="center">
            <Box>
              <Text fontWeight="bold" fontSize="sm">{song.title}</Text>
              <Text color="gray.500" fontSize="xs">{song.artist}</Text>
            </Box>
            <select
              onChange={(e: ChangeEvent<HTMLSelectElement>) => onAddToPlaylist(song.id, e.target.value)}
              value=""
              style={{
                padding: '0.25rem',
                fontSize: '0.875rem',
                borderRadius: '0.375rem',
                border: '1px solid #E2E8F0'
              }}
            >
              <option value="" disabled>Add to playlist</option>
              {playlists.map((playlist) => (
                <option key={playlist.name} value={playlist.name}>
                  {playlist.name}
                </option>
              ))}
            </select>
          </Flex>
        </Box>
      ))}
    </Flex>
  );
};