"use client";

import { Switch } from "@cap/ui";
import { useState } from "react";

interface SettingOption {
	id: string;
	label: string;
	description?: string;
	enabled: boolean;
}

export const Settings = () => {
	const [settings, setSettings] = useState<SettingOption[]>([
		{
			id: "allow_comments",
			label: "Allow Comments",
			description: "Define what viewers can see and do.",
			enabled: true,
		},
		{
			id: "allow_anonymous_comments",
			label: "Allow Anonymous Comments",
			enabled: false,
		},
		{
			id: "enable_transcript",
			label: "Enable Transcript",
			enabled: true,
		},
		{
			id: "enable_download",
			label: "Enable Download",
			enabled: true,
		},
	]);

	const toggleSetting = (id: string) => {
		setSettings((prev) =>
			prev.map((setting) =>
				setting.id === id ? { ...setting, enabled: !setting.enabled } : setting,
			),
		);
	};

	return (
		<div className="flex flex-col h-full">
			<div className="p-4 border-b border-gray-200">
				<h3 className="text-sm font-medium">Settings</h3>
			</div>
			<div className="overflow-y-auto flex-1">
				<div className="p-4 space-y-6">
					{settings.map((setting) => (
						<div key={setting.id} className="flex justify-between items-center">
							<div className="flex-1">
								<div className="flex justify-between items-center">
									<div>
										<h4 className="text-sm font-medium text-gray-900">
											{setting.label}
										</h4>
										{setting.description && (
											<p className="text-sm text-gray-12">
												{setting.description}
											</p>
										)}
									</div>
									<Switch
										checked={setting.enabled}
										onCheckedChange={() => toggleSetting(setting.id)}
									/>
								</div>
							</div>
						</div>
					))}
				</div>
			</div>
		</div>
	);
};
