Briven/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/CPUWarnings.tsx

import { AlertTitle } from '@ui/components/shadcn/ui/alert'
import { AlertCircle } from 'lucide-react'
import Link from 'next/link'
import { Alert, AlertDescription, Button } from 'ui'

import { DOCS_URL } from '@/lib/constants'

interface CPUWarningsProps {
  hasAccessToComputeSizes: boolean
  upgradeUrl: string
  severity?: 'warning' | 'critical' | null
}

export const CPUWarnings = ({
  hasAccessToComputeSizes,
  upgradeUrl,
  severity,
}: CPUWarningsProps) => {
  if (severity === 'warning') {
    return (
      <Alert variant="warning">
        <AlertCircle />
        <AlertTitle>Your max CPU usage has exceeded 80%</AlertTitle>
        <AlertDescription>
          High CPU usage could result in slower queries, disruption of daily back up routines, and
          in rare cases, your instance may become unresponsive. If you need more resources, consider
          upgrading to a larger compute add-on.
        </AlertDescription>
        <div className="mt-3 flex items-center space-x-2">
          <Button asChild type="default">
            <Link href={`${DOCS_URL}/guides/troubleshooting/high-cpu-usage`}>Learn more</Link>
          </Button>
          <Button asChild type="warning">
            <Link href={upgradeUrl}>
              {hasAccessToComputeSizes ? 'Change compute add-on' : 'Upgrade project'}
            </Link>
          </Button>
        </div>
      </Alert>
    )
  }

  if (severity === 'critical') {
    return (
      <Alert variant="destructive">
        <AlertCircle />
        <AlertTitle>Your max CPU usage has reached 100%</AlertTitle>
        <AlertDescription>
          High CPU usage could result in slower queries, disruption of daily back up routines, and
          in rare cases, your instance may become unresponsive. If you need more resources, consider
          upgrading to a larger compute add-on.
        </AlertDescription>
        <div className="mt-3 flex items-center space-x-2">
          <Button asChild type="default">
            <Link href={`${DOCS_URL}/guides/troubleshooting/high-cpu-usage`}>Learn more</Link>
          </Button>
          <Button asChild type="danger">
            <Link href={upgradeUrl}>
              {hasAccessToComputeSizes ? 'Change compute add-on' : 'Upgrade project'}
            </Link>
          </Button>
        </div>
      </Alert>
    )
  }

  return null
}