interface ProductFeature {
  name?: string;
  value?: string[];
}

const ProductFeatures = ({ features = [] }: { features?: ProductFeature[] }) => {
  if (!features.length) return null;

  return (
    <section className="py-8 sm:py-10" aria-labelledby="technical-features-title">
      <div className="mb-5 flex items-end justify-between gap-4 border-b border-black/10 pb-4">
        <div>
          <span className="text-xs font-bold uppercase tracking-[0.2em] text-primary">Ürün verileri</span>
          <h2 id="technical-features-title" className="mt-2 text-2xl font-semibold text-black">Teknik Özellikler</h2>
        </div>
        <span className="hidden text-sm text-metin sm:block">{features.length} parametre</span>
      </div>

      <dl className="overflow-hidden border border-black/10 bg-white">
        {features.map((feature, index) => (
          <div
            key={`${feature.name}-${index}`}
            className="grid gap-2 border-b border-black/10 px-4 py-4 last:border-b-0 even:bg-acikgri/70 sm:grid-cols-[minmax(190px,0.38fr)_1fr] sm:gap-8 sm:px-6"
          >
            <dt className="font-semibold text-primary">{feature.name}</dt>
            <dd className="space-y-1 font-medium leading-6 text-black">
              {(feature.value || []).map((value, valueIndex) => (
                <span className="block" dangerouslySetInnerHTML={{ __html: value }} key={valueIndex} />
              ))}
            </dd>
          </div>
        ))}
      </dl>
    </section>
  );
};

export default ProductFeatures;