'use client';

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';

export default function TenantSettingsPage() {
  return (
    <div>
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-slate-800">Tenant Settings</h1>
        <p className="text-slate-500 text-sm mt-1">Configure your ISP business details</p>
      </div>

      <Card className="border shadow-sm max-w-2xl">
        <CardHeader>
          <CardTitle className="text-base">Business Information</CardTitle>
          <CardDescription>Update your ISP company details</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-1.5">
            <Label>Business Name</Label>
            <Input placeholder="e.g. My Internet Services" />
          </div>
          <div className="space-y-1.5">
            <Label>Address</Label>
            <Input placeholder="Business address" />
          </div>
          <div className="space-y-1.5">
            <Label>Phone</Label>
            <Input placeholder="+63 9XX XXX XXXX" />
          </div>
          <div className="space-y-1.5">
            <Label>Email</Label>
            <Input type="email" placeholder="info@yourisp.com" />
          </div>
          <Button style={{ backgroundColor: '#0891B2' }}>Save Changes</Button>
        </CardContent>
      </Card>
    </div>
  );
}