import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';

export function SettingsSecurity() {
    const [twoFactorEnabled, setTwoFactorEnabled] = useState(false);

    return (
        <div className="flex-1 lg:max-w-4xl space-y-6 p-4 md:p-8 pt-6">
            <div className="space-y-0.5">
                <h2 className="text-2xl font-bold tracking-tight">Security</h2>
                <p className="text-muted-foreground">Manage your security settings and authentication methods.</p>
            </div>
            <Separator className="my-6" />

            <Card>
                <CardHeader>
                    <CardTitle>Security Settings</CardTitle>
                    <CardDescription>
                        Configure two-factor authentication, password policies, and session management.
                    </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                    <div className="flex flex-col md:flex-row md:items-center justify-between p-4 rounded-lg border bg-card hover:bg-accent/5 transition-colors">
                        <div className="space-y-1">
                            <h3 className="font-medium">Two-Factor Authentication</h3>
                            <p className="text-sm text-muted-foreground">
                                Add an extra layer of security to your account requiring more than just a password to
                                log in.
                            </p>
                        </div>
                        <div className="mt-4 md:mt-0">
                            <Button
                                variant={twoFactorEnabled ? 'outline' : 'default'}
                                onClick={() => setTwoFactorEnabled(!twoFactorEnabled)}
                            >
                                {twoFactorEnabled ? 'Disable' : 'Enable'}
                            </Button>
                        </div>
                    </div>

                    <div className="flex flex-col md:flex-row md:items-center justify-between p-4 rounded-lg border bg-card hover:bg-accent/5 transition-colors">
                        <div className="space-y-1">
                            <h3 className="font-medium">Password Policy</h3>
                            <p className="text-sm text-muted-foreground">Set requirements for password strength</p>
                        </div>
                        <div className="mt-4 md:mt-0 flex items-center space-x-2">
                            <span className="text-sm text-muted-foreground">Standard</span>
                        </div>
                    </div>

                    <div className="flex flex-col md:flex-row md:items-center justify-between p-4 rounded-lg border bg-card hover:bg-accent/5 transition-colors">
                        <div className="space-y-1">
                            <h3 className="font-medium">Session Management</h3>
                            <p className="text-sm text-muted-foreground">View and manage active sessions</p>
                        </div>
                        <div className="mt-4 md:mt-0 flex items-center space-x-2">
                            <span className="text-sm text-muted-foreground">1 active</span>
                            <Button variant="ghost" size="sm">
                                Manage
                            </Button>
                        </div>
                    </div>
                </CardContent>
            </Card>
        </div>
    );
}
