import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';

export function SettingsNotifications() {
  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">Notification Preferences</CardTitle>
          <CardDescription>
            Manage how and when you receive notifications from mockupAWS
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="space-y-4">
            <div className="border-t pt-4">
              <h3 className="font-medium mb-2">Email Notifications</h3>
              <div className="space-y-3">
                <label className="flex items-center space-x-3">
                  <input type="checkbox" checked defaultChecked />
                  <span>Report completion notifications</span>
                </label>
                <label className="flex items-center space-x-3">
                  <input type="checkbox" checked defaultChecked />
                  <span>Weekly cost summary</span>
                </label>
                <label className="flex items-center space-x-3">
                  <input type="checkbox" checked defaultChecked />
                  <span>Budget alert notifications</span>
                </label>
                <label className="flex items-center space-x-3">
                  <input type="checkbox" />
                  <span>Security alerts</span>
                </label>
              </div>
            </div>
            
            <div className="border-t pt-4">
              <h3 className="font-medium mb-2">Push Notifications</h3>
              <p className="text-sm text-muted-foreground">
                Browser notifications for real-time updates (coming soon)
              </p>
            </div>
          </div>
        </CardContent>
        <CardFooter>
          <Button variant="outline">Save Preferences</Button>
        </CardFooter>
      </Card>
    </div>
  );
}
