'use client'

import Image from 'next/image'
import check from '../_assets/check.svg'

const defaultFeatures = [
  '支持高并发提取',
  '指定省份、城市或混播',
  '账密＋白名单验证',
  '完备的API接口',
  'IP时效3-30分钟(可定制)',
  'IP资源定期筛选',
  '包量/包时计费方式',
  '每日去重量：500万',
]

export function FeatureList(props: {
  items?: string[]
}) {
  const items = props.items || defaultFeatures

  return (
    <div className="space-y-6">
      <h3>产品特性</h3>
      <div className="grid grid-cols-2 md:grid-cols-3 auto-rows-fr gap-4 md:gap-y-6">
        {items.map(item => (
          <p key={item} className="flex gap-2 items-center">
            <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
            <span className="text-sm text-gray-500">{item}</span>
          </p>
        ))}
      </div>
    </div>
  )
}