import React from 'react';
import { Button, Typography, Tooltip as AntTooltip, Avatar } from 'antd';
import { 
  PlayCircleOutlined, 
  HistoryOutlined, 
  CustomerServiceOutlined,
  RobotOutlined
} from '@ant-design/icons';

const { Text } = Typography;

const TrackList = ({ tracks, maxHeight = "max-h-60" }) => {
  if (!tracks || tracks.length === 0) return <div className="text-gray-500 text-sm py-4 text-center">No tracks available</div>;

  return (
    <div className={`${maxHeight} overflow-y-auto custom-scrollbar pr-2 -mr-2 my-4 space-y-2`}>
      {tracks.map((track, idx) => (
        <div key={`${track.id}-${idx}`} className="flex items-center p-2 rounded-lg bg-slate-700/50 hover:bg-slate-700 transition-colors group">
          <div className="flex-shrink-0 relative">
            <Avatar shape="square" size={40} src={track.image_url} icon={<CustomerServiceOutlined />} />
            <div className="absolute -top-1 -right-1">
              {track.source === 'recommendation' ? (
                <AntTooltip title="AI Recommendation">
                  <div className="bg-purple-500 rounded-full p-0.5 w-4 h-4 flex items-center justify-center">
                    <RobotOutlined className="text-white text-[10px]" />
                  </div>
                </AntTooltip>
              ) : (
                <AntTooltip title="From History">
                  <div className="bg-blue-500 rounded-full p-0.5 w-4 h-4 flex items-center justify-center">
                    <HistoryOutlined className="text-white text-[10px]" />
                  </div>
                </AntTooltip>
              )}
            </div>
          </div>
          <div className="ml-3 flex-grow min-w-0">
            <Text className="text-white text-sm font-medium truncate block" title={track.name}>
              {track.name}
            </Text>
            <Text className="text-gray-400 text-xs truncate block" title={track.artist}>
              {track.artist}
            </Text>
          </div>
          <div className="ml-2 opacity-0 group-hover:opacity-100 transition-opacity">
            <Button 
              type="text" 
              size="small" 
              icon={<PlayCircleOutlined />} 
              href={`https://open.spotify.com/track/${track.id}`}
              target="_blank"
              className="text-gray-400 hover:text-white"
            />
          </div>
        </div>
      ))}
    </div>
  );
};

export default TrackList;
