
import React from 'react';
import { Switch } from '@/components/ui/switch';
import { Label } from '@/components/ui/label';

type SecuritySettingItemProps = {
  id: string;
  title: string;
  description: string;
  icon: React.ReactNode;
  enabled: boolean;
  onToggle: (id: string) => void;
};

const SecuritySettingItem = ({ 
  id, 
  title, 
  description, 
  icon, 
  enabled, 
  onToggle 
}: SecuritySettingItemProps) => {
  return (
    <div className="flex items-start justify-between">
      <div className="flex items-start space-x-4 flex-1">
        <div className="neuro-pressed p-3 rounded-full text-neuro-income shrink-0 mt-1">
          {icon}
        </div>
        <div className="text-left">
          <h3 className="font-medium">{title}</h3>
          <p className="text-xs text-gray-500 mt-1">{description}</p>
        </div>
      </div>
      <div className="flex items-center ml-4">
        <Switch
          id={`${id}-switch`}
          checked={enabled}
          onCheckedChange={() => onToggle(id)}
          className="data-[state=checked]:bg-neuro-income"
        />
        <Label
          htmlFor={`${id}-switch`}
          className="sr-only"
        >
          {title}
        </Label>
      </div>
    </div>
  );
};

export default SecuritySettingItem;
