import type { StorageData } from "@/lib/storage"
import { formatFileSize } from "@/lib/utils"

interface StorageUsageProps {
  data: StorageData
}

export function StorageUsage({ data }: StorageUsageProps) {
  // Safety check for undefined data
  if (!data) {
    return (
      <div className="bg-card rounded-lg border p-4">
        <div className="flex items-center justify-between mb-2">
          <span className="text-sm font-medium">Disk Usage</span>
          <span className="text-sm text-muted-foreground">Loading...</span>
        </div>
        <div className="w-full h-2 bg-gray-200 rounded-full" />
      </div>
    )
  }

  const { totalDiskCapacity, totalDiskUsed } = data
  
  // Calculate percentage of disk used
  const diskUsedPercentage = totalDiskCapacity > 0 ? (totalDiskUsed / totalDiskCapacity) * 100 : 0
  const availableSpace = totalDiskCapacity - totalDiskUsed
  
  return (
    <div className="bg-card rounded-lg border p-4">
      <div className="flex items-center justify-between mb-2">
        <span className="text-sm font-medium">Disk Usage</span>
        <span className="text-sm text-muted-foreground">
          {formatFileSize(totalDiskUsed)} used of {formatFileSize(totalDiskCapacity)}
        </span>
      </div>
      
      {/* Simple progress bar showing disk usage */}
      <div className="relative w-full h-2 bg-gray-200 rounded-full overflow-hidden">
        <div 
          className="absolute top-0 left-0 h-full bg-blue-600 rounded-full transition-all duration-300"
          style={{ width: `${Math.min(diskUsedPercentage, 100)}%` }}
        />
      </div>
      
      <div className="flex justify-between text-xs text-muted-foreground mt-2">
        <div className="flex items-center gap-1">
          <div className="w-2 h-2 bg-blue-600 rounded-full" />
          <span>Used: {formatFileSize(totalDiskUsed)}</span>
        </div>
        <span>{formatFileSize(availableSpace)} available</span>
      </div>
    </div>
  )
}