import React from 'react';
import { Nav, Row, Col, Drawer, Message, Divider, Tooltip, Whisper, Button, Placeholder, Stack, Notification, useToaster, Progress } from 'rsuite';
import { sizeToString } from '@/lib/utils/string';

interface ProgressQuotaProps {
  total: number
  used: number
  label: string
}

const ProgressQuota: React.FC<ProgressQuotaProps> = ({ total, used, label }) => {
  const percent = (used / total) * 100;
  const color = percent > 100 ? '#F44336' : percent > 80 ? '#FFB300' : '#4CAF50';

  return (
    <Row>
      <Col xs={3}><p>{label}</p></Col>
      <Col xs={18}><Progress.Line percent={percent} strokeColor={color} showInfo={false} /></Col>
      <Col xs={3}>
        { label !== 'Size'
          ? <p>{used}/{total}</p>
          : <p>{sizeToString(used)} / {sizeToString(total)}</p>
        }
      </Col>
    </Row>
  )
}

export default ProgressQuota;