'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card';
import { CreditCard, FileText } from 'lucide-react';
import Link from 'next/link';

export function BillingTile() {
  // Mock data - in production, this would come from API
  const billing = {
    currentInvoice: 45230,
    nextBillingDate: '2024-02-15',
    paymentMethod: 'Credit Card ending in 4242',
    invoicesPending: 0,
  };

  return (
    <Card className="bg-gray-800 border-gray-700">
      <CardHeader>
        <CardTitle className="text-white flex items-center gap-2">
          <CreditCard className="h-5 w-5 text-orange-500" />
          Billing & Invoices
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          <div>
            <p className="text-2xl font-bold text-white mb-1">
              ${billing.currentInvoice.toLocaleString()}
            </p>
            <p className="text-sm text-gray-400">Current Invoice</p>
          </div>
          
          <div className="p-3 bg-gray-900 rounded-lg">
            <p className="text-xs text-gray-400 mb-1">Next Billing Date</p>
            <p className="text-sm font-semibold text-white">
              {new Date(billing.nextBillingDate).toLocaleDateString()}
            </p>
          </div>

          <div className="p-3 bg-gray-900 rounded-lg">
            <p className="text-xs text-gray-400 mb-1">Payment Method</p>
            <p className="text-sm text-white">{billing.paymentMethod}</p>
          </div>

          {billing.invoicesPending > 0 && (
            <div className="p-3 bg-yellow-500/10 border border-yellow-500/20 rounded-lg">
              <div className="flex items-center gap-2">
                <FileText className="h-4 w-4 text-yellow-400" />
                <span className="text-sm text-yellow-400 font-semibold">
                  {billing.invoicesPending} invoice{billing.invoicesPending > 1 ? 's' : ''} pending
                </span>
              </div>
            </div>
          )}

          <Link 
            href="/admin/billing"
            className="block text-center text-sm text-orange-500 hover:text-orange-400 transition-colors"
          >
            View All Invoices →
          </Link>
        </div>
      </CardContent>
    </Card>
  );
}