'use client';

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

export default function AreasPage() {
  return (
    <div>
      <div className="mb-6 flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-slate-800">Areas & Zones</h1>
          <p className="text-slate-500 text-sm mt-1">Define service coverage areas</p>
        </div>
        <Button style={{ backgroundColor: '#0891B2' }}>
          <Plus size={16} className="mr-2" />
          Add Area
        </Button>
      </div>

      <Card className="border shadow-sm">
        <CardContent className="flex flex-col items-center justify-center py-16 text-slate-400">
          <MapPin size={32} className="mb-3 text-slate-300" />
          <p className="text-sm font-medium">No areas defined yet</p>
          <p className="text-xs mt-1">Create areas to group clients by coverage zone</p>
        </CardContent>
      </Card>
    </div>
  );
}