import React from 'react';
import { Playlist } from '../types';
import { Disc3, Clock } from 'lucide-react';

interface PlaylistCardProps {
  playlist: Playlist;
}

const PlaylistCard: React.FC<PlaylistCardProps> = ({ playlist }) => {
  return (
    <div className="group flex flex-col w-full p-2.5 bg-gray-800/60 rounded-md border border-gray-700/50 hover:bg-gray-700 hover:border-plex-orange/50 transition-all duration-200 cursor-pointer shadow-sm">
      <div className="flex items-center justify-between">
        <h4 className="text-sm font-medium text-gray-200 truncate flex-1 mr-2 group-hover:text-white transition-colors">
          {playlist.title}
        </h4>
      </div>
      
      <div className="flex items-center mt-1.5 space-x-4 text-xs text-gray-500 group-hover:text-gray-400">
        <span className="flex items-center" title="Track Count">
          <Disc3 size={12} className="mr-1.5 opacity-70" />
          {playlist.trackCount}
        </span>
        <span className="flex items-center" title="Last Updated">
          <Clock size={12} className="mr-1.5 opacity-70" />
          {new Date(playlist.lastUpdated).toLocaleDateString()}
        </span>
      </div>
    </div>
  );
};

export default PlaylistCard;