interface Props {
  name: string;
  age: number;
  male: boolean;
  list: string[];
  data: any;
  func: () => string;
}

export function ComponentTest({ name, age, male, list, data, func }: Props) {
  return (
    <div className="component-book cb-border cb-border-solid cb-border-slate-300 dark:cb-border-slate-600 cb-p-5 cb-text-black dark:cb-text-white cb-grid lg:cb-grid-cols-3 cb-gap-2 cb-text-sm">
      <div>
        <div className="component-book cb-font-bold">name</div>
        <div>{name}</div>
      </div>
      <div>
        <div className="component-book cb-font-bold">age</div>
        <div>{age}</div>
      </div>
      <div>
        <div className="component-book cb-font-bold">male</div>
        <div>{male ? "true" : "false"}</div>
      </div>
      <div>
        <div className="component-book cb-font-bold">list</div>
        <div>{JSON.stringify(list)}</div>
      </div>
      <div>
        <div className="component-book cb-font-bold">data</div>
        <div>{JSON.stringify(data)}</div>
      </div>
      <div>
        <div className="component-book cb-font-bold">Function</div>
        <div>{func()}</div>
      </div>
    </div>
  );
}