import CapacityValue from "./CapacityValue";
import "./Stats.css";

const facts = [
  {
    label: "Production capacity",
    value: <CapacityValue />,
    unit: "Tonnes / month",
    text: "Approximate monthly manufacturing capacity.",
  },
  {
    label: "Our specialisation",
    value: "Greige",
    unit: "Knitted fabrics only",
    text: "The starting point for a world of possibilities.",
  },
  {
    label: "The capability",
    value: "Circular",
    unit: "Knitting · multiple constructions",
    text: "Different structures. Different configurations.",
  },
  {
    label: "The approach",
    value: "Continuous",
    unit: "Fabric development",
    text: "Exploring yarns, blends and new constructions.",
  },
];

export default function Stats() {
  return (
    <section className="stats" aria-label="RRS at a glance">
      {facts.map(({ label, value, unit, text }) => (
        <div className="stats__item" key={label}>
          <p className="stats__label">{label}</p>
          <p className="stats__value">{value}</p>
          <p className="stats__unit">{unit}</p>
          <p className="stats__text">{text}</p>
        </div>
      ))}
    </section>
  );
}