import React from 'react';
import {Lock} from 'lucide-react';
import IconContainer from "@/components/ui/IconContainer";

interface LockCardProps {
    title: string;
    description: string;
}

export default function LockCard({title, description}: LockCardProps): React.JSX.Element {
    return (
        <div className="flex flex-col h-full bg-tertiary">
            <div className="flex-1 p-6 overflow-y-auto flex items-center justify-center">
                <div className="max-w-md mx-auto">
                    <div className="bg-tertiary rounded-2xl p-8 text-center">
                        <div className="mx-auto mb-6">
                            <IconContainer icon={Lock} size="xl" shape="rounded" filled/>
                        </div>
                        <h3 className="text-xl font-['ADLaM_Display'] text-text-primary mb-4">
                            {title}
                        </h3>
                        <p className="text-muted leading-relaxed text-lg">
                            {description}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    );
}