import { useTranslations } from "next-intl";

export function Features({ features }: { features: string[] }) {
  const t = useTranslations();
  if (!features || features.length === 0) {
    return null;
  }

  return (
    <div className="mt-12">
      <h2 className="text-2xl md:text-3xl font-bold text-white mb-6">
        {t("products.features")}
      </h2>
      <div className="rounded-xl overflow-hidden border border-gray-800 shadow-xl">
        <table className="w-full">
          <thead>
            <tr className="bg-linear-to-r from-stone-800 to-black/10 border-b border-gray-800">
              <th className="px-4 py-4 md:px-6 text-left text-sm md:text-base font-semibold text-white">
                {t("products.feature")}
              </th>
            </tr>
          </thead>
          <tbody>
            {features.map((feature, index) => (
              <tr
                key={index}
                className={`border-b border-gray-800 last:border-b-0 transition-colors hover:bg-red-900/10 ${
                  index % 2 === 0 ? "bg-[#252525]" : "bg-[#1e1e1e]"
                }`}
              >
                <td className="px-4 py-4 md:px-6 text-sm md:text-base text-gray-300">
                  <div className="flex items-start gap-3">
                    <span className="text-red-700 mt-1">•</span>
                    <span>{feature}</span>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}