'use client'

import { WifiHigh } from '@phosphor-icons/react'
import { Badge } from '@/components/ui/badge'

export function IdleCard() {
  return (
    <div className="flex flex-col h-full">
      <div className="flex items-center justify-center flex-1 p-8">
        <div className="text-center">
          <WifiHigh className="h-16 w-16 text-muted-foreground/30 mx-auto mb-4" weight="thin" />
          <p className="text-muted-foreground mb-2">Send a request to see the response</p>
          <p className="text-sm text-muted-foreground/70">
            Press <kbd className="px-2 py-1 bg-muted rounded text-xs font-mono">Enter</kbd> or click{' '}
            <Badge variant="default" className="text-xs">Send</Badge>
          </p>
        </div>
      </div>
    </div>
  )
}
