import React from 'react';

interface TableCheckItemProps {
  name: string;
  required?: boolean;
}

export const TableCheckItem: React.FC<TableCheckItemProps> = ({ name, required }) => (
  <div className="flex items-center justify-between p-3 bg-white border border-slate-200 rounded-lg hover:border-blue-400 transition-colors cursor-pointer group">
    <div className="flex items-center">
      <div className="w-5 h-5 rounded border border-slate-300 mr-3 flex items-center justify-center text-white group-hover:border-blue-500">
        <div className="w-3 h-3 bg-slate-200 rounded-sm group-hover:bg-blue-100"></div>
      </div>
      <span className="text-sm font-medium text-slate-700">{name}</span>
    </div>
    {required && <span className="text-[10px] text-red-500 font-bold bg-red-50 px-1.5 py-0.5 rounded">必选</span>}
  </div>
);