export function Features({ features }: { features: string[] }) {
  return (
    <table className="w-full rounded-xl overflow-hidden">
      <thead>
        <tr className="border-b border-gray-700 bg-black">
          <th className="px-4 py-4 md:px-6 text-left text-sm md:text-base font-semibold text-white">
            Feature
          </th>
        </tr>
      </thead>
      <tbody>
        {features.map((feature, index) => (
          <tr
            key={index}
            className={` border-gray-700 transition-colors hover:bg-opacity-80 ${
              index % 2 === 0 ? "bg-[#323232]" : "bg-black/20"
            }`}
          >
            <td className="px-4 py-4 md:px-6 text-sm md:text-base text-white font-medium">
              {feature}
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}