import { Typography } from "@/components/Typography";
import { Container } from "@/components/layout/Container";

export type FeaturesProps = {
  tagline: string;
  heading: string;
  subheading: string;
  columns: "2" | "3" | "4";
  items: Array<{ title: string; body: string }>;
};

const colClass: Record<FeaturesProps["columns"], string> = {
  "2": "md:grid-cols-2",
  "3": "md:grid-cols-3",
  "4": "md:grid-cols-2 lg:grid-cols-4",
};

export function Features({ tagline, heading, subheading, columns, items }: FeaturesProps) {
  return (
    <section className="bg-background py-20 md:py-28">
      <Container>
        <div className="mx-auto mb-16 max-w-2xl text-center">
          {tagline ? (
            <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
              {tagline}
            </p>
          ) : null}
          <Typography variant="h2">{heading}</Typography>
          {subheading ? (
            <Typography variant="subtitle1" className="mt-3">
              {subheading}
            </Typography>
          ) : null}
        </div>

        <div className={`grid grid-cols-1 gap-x-10 gap-y-12 ${colClass[columns]}`}>
          {items.map((item, i) => (
            <div key={i} className="border-t border-border pt-6">
              <p className="mb-3 text-xs tracking-[0.18em] text-muted-foreground">
                {String(i + 1).padStart(2, "0")}
              </p>
              <Typography variant="h5">{item.title}</Typography>
              <Typography variant="body2" className="mt-3 text-muted-foreground">
                {item.body}
              </Typography>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}