"use client"
import {
  MaterialIcon,
  type MaterialIconProps,
} from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import styles from "./row.module.css"

interface RowProps {
  icon: MaterialIconProps["icon"]
  text: string
  title: string
}

export default function Row({
  icon,
  text,
  title,
  children,
}: React.PropsWithChildren<RowProps>) {
  return (
    <div className={styles.row}>
      <span className={styles.title}>
        <MaterialIcon icon={icon} color="Icon/Default" size={20} />
        <Typography variant="Body/Paragraph/mdBold">
          <p>{title}</p>
        </Typography>
      </span>
      <div className={styles.content}>
        <Typography variant="Body/Paragraph/mdRegular">
          <p>{text}</p>
        </Typography>
        {children}
      </div>
    </div>
  )
}
