import { LockOutlined } from '@ant-design/icons';
import type { SharedMedia } from '@/types/media';
import VideoCard from './VideoCard';

interface SharedMediaCardProps {
  sharedMedia: SharedMedia;
  selected: boolean;
  onSelect: (id: number) => void;
}

export default function SharedMediaCard({ sharedMedia, selected, onSelect }: SharedMediaCardProps) {
  return (
    <div style={{ position: 'relative' }}>
      <VideoCard video={sharedMedia.video} selected={selected} onSelect={() => onSelect(sharedMedia.id)} />

      {/* Lock overlay */}
      {sharedMedia.isLocked && (
        <div
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            background: 'rgba(0, 0, 0, 0.6)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            borderRadius: 8,
            pointerEvents: 'none',
          }}
        >
          <LockOutlined style={{ fontSize: 48, color: '#fff' }} />
        </div>
      )}
    </div>
  );
}
