export default function FeatureCards({ features, layout = 'default' }) {
  if (layout === 'choose') {
    return (
      <div className="choose-feature-wrap">
        {features.map((f, i) => (
          <div key={i} className="choose-feature">
            <div className="box-icon"><img decoding="async" src={f.icon} alt={f.title} /></div>
            <h3 className="box-title">{f.title}</h3>
          </div>
        ))}
      </div>
    )
  }
  if (layout === 'process') {
    return (
      <div className="contact-process-wrap no-bg">
        {features.map((f, i) => (
          <div key={i} className="contact-process">
            <div className="box-number">{String(i + 1).padStart(2, '0')}</div>
            <div className="media-body">
              <h3 className="box-title">{f.title}</h3>
              <p className="box-text">{f.description}</p>
            </div>
          </div>
        ))}
      </div>
    )
  }
  // default: about-media layout
  return (
    <div className="about-media-wrap">
      {features.map((f, i) => (
        <div key={i} className="about-media">
          <div className="box-icon"><img decoding="async" src={f.icon} alt={f.title} /></div>
          <h3 className="box-title">{f.title}</h3>
          <p className="box-text">{f.description}</p>
        </div>
      ))}
    </div>
  )
}