interface TextProps {
  content: string;
  style?: "body" | "caption" | "headline" | "overline";
}

const STYLE_MAP: Record<string, string> = {
  body: "text-[var(--z-font-md)] leading-relaxed",
  caption: "text-[var(--z-font-sm)]",
  headline: "text-lg font-semibold",
  overline: "text-[var(--z-font-xs)] font-mono uppercase tracking-wider",
};

const COLOR_MAP: Record<string, string> = {
  body: "var(--z-muted)",
  caption: "var(--z-muted)",
  headline: "var(--z-text)",
  overline: "var(--z-muted)",
};

export function Text({ content, style = "body" }: TextProps) {
  return (
    <p class={`${STYLE_MAP[style] || STYLE_MAP.body} mb-2`} style={{ color: COLOR_MAP[style] || COLOR_MAP.body }}>
      {content}
    </p>
  );
}
