import React, { useState } from "react";
import { Text, Select } from "@tencent/tea-component";

/**
 * @type {('baseline' | 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom')[]}
 */
const aligns = [
  "baseline",
  "top",
  "middle",
  "bottom",
  "text-top",
  "text-bottom",
];

export default () => {
  /**
   * @type {[any, any]}
   */
  const [compare, setCompare] = useState("baseline");

  const select = (
    <Select
      style={{ fontSize: "18px" }}
      type="simulate"
      options={aligns.map(align => ({ value: align }))}
      value={compare}
      onChange={compare => setCompare(compare)}
    />
  );

  return (
    <>
      {aligns.map(align => (
        <p key={align} style={{ fontSize: "24px", fontFamily: "monospace" }}>
          <Text verticalAlign={compare} bgTheme="warning">
            {compare}{" "}
          </Text>
          <Text verticalAlign={align} bgTheme="success">
            {align}
          </Text>
        </p>
      ))}
      <hr />
      <section>
        <Text verticalAlign="middle">参照：</Text>
        {select}
      </section>
    </>
  );
};