"use client";

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Switch } from "@/components/ui/switch";
import { Label } from "@/components/ui/label";

const SECTIONS = [
  {
    title: "Reservation settings",
    description: "Default duration, party size limits, auto-confirm rules (UI only).",
  },
  {
    title: "Notification preferences",
    description: "Email/SMS toggles for confirmations and reminders (not connected).",
  },
  {
    title: "Venue timing setup",
    description: "Service periods, blackout dates, and turn times per venue.",
  },
  {
    title: "User permissions",
    description: "Role-based access matrix — Super Admin, Manager, Operations Staff.",
  },
];

export default function SettingsPage() {
  return (
    <div className="p-6 space-y-6">
      <div>
        <h1 className="text-2xl font-bold">Platform settings</h1>
        <p className="text-sm text-muted-foreground">Configuration sections for demonstration</p>
      </div>
      <div className="grid gap-4 md:grid-cols-2">
        {SECTIONS.map((section) => (
          <Card key={section.title}>
            <CardHeader>
              <CardTitle className="text-base">{section.title}</CardTitle>
              <CardDescription>{section.description}</CardDescription>
            </CardHeader>
            <CardContent className="space-y-3">
              <div className="flex items-center justify-between">
                <Label>Enabled (demo)</Label>
                <Switch defaultChecked />
              </div>
              <div className="flex items-center justify-between">
                <Label>Require approval</Label>
                <Switch />
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}