import React from 'react';
import { HardDrive } from 'lucide-react';

interface StorageItem {
    key: string;
    value: string;
    size: number;
    isSensitive: boolean;
}

interface StorageBadgeProps {
  localItems: StorageItem[];
  sessionItems: StorageItem[];
}

const StorageBadge: React.FC<StorageBadgeProps> = ({ localItems, sessionItems }) => {
  const totalItems = localItems.length + sessionItems.length;
  const sensitiveCount = [...localItems, ...sessionItems].filter(i => i.isSensitive).length;

  const status = sensitiveCount > 0 ? 'Warning' : totalItems > 0 ? 'Active' : 'Empty';
  const colorClass = 
    status === 'Warning' ? 'text-amber-500/80' : 
    status === 'Active' ? 'text-teal-500/80' : 
    'text-green-500/80';

  return (
    <div className={`flex items-center gap-2 ${colorClass}`}>
      <HardDrive className="w-4 h-4" />
      <span className="text-xs font-medium">{status}</span>
    </div>
  );
};

export default StorageBadge;