'use client';

import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Plus } from 'lucide-react';

export default function PlansPage() {
  return (
    <div>
      <div className="mb-6 flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-slate-800">Service Plans</h1>
          <p className="text-slate-500 text-sm mt-1">Manage internet subscription plans</p>
        </div>
        <Button style={{ backgroundColor: '#0891B2' }}>
          <Plus size={16} className="mr-2" />
          Add Plan
        </Button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card className="border shadow-sm border-dashed border-slate-300">
          <CardContent className="flex flex-col items-center justify-center py-12 text-slate-400">
            <Plus size={24} className="mb-2" />
            <p className="text-sm">Create your first plan</p>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}