import { Row, Col } from "./layout";
import { CHIP, COLORS, TYPOGRAPHY } from "./constants";

interface CodePanelProps {
  lines: string[];
  maxLines: number;
  height: number;
  fontSize?: number;
}

export function CodePanel({
  lines,
  maxLines,
  height,
  fontSize = 24,
}: CodePanelProps) {
  const shown = lines.slice(0, maxLines);
  const gutter = String(shown.length).length;

  return (
    <div
      style={{
        display: "flex",
        width: "100%",
        height,
        padding: CHIP.border,
        borderRadius: CHIP.radius + 4,
        backgroundColor: COLORS.chip.background,
        backgroundImage: COLORS.chip.stroke,
        boxShadow: COLORS.chip.shadow,
      }}>
      <Col
        style={{
          flexGrow: 1,
          minWidth: 0,
          padding: "18px 24px",
          gap: fontSize * 0.45,
          borderRadius: CHIP.radius + 2,
          backgroundColor: COLORS.chip.background,
          overflow: "hidden",
        }}>
        {shown.map((line, i) => (
          <Row
            key={i}
            style={{ gap: 24, alignItems: "flex-start", overflow: "hidden" }}>
            <span
              style={{
                ...TYPOGRAPHY.body,
                fontSize,
                color: COLORS.textMuted,
                width: gutter * fontSize * 0.62,
                justifyContent: "flex-end",
                display: "flex",
              }}>
              {i + 1}
            </span>
            <span
              style={{
                ...TYPOGRAPHY.body,
                fontSize,
                color: COLORS.text,
                whiteSpace: "pre",
                flex: 1,
                minWidth: 0,
                overflow: "hidden",
              }}>
              {line.length > 0 ? line : " "}
            </span>
          </Row>
        ))}
      </Col>
    </div>
  );
}