import { Feature } from 'types';

export function HomeFeature(props: { features: Feature[] }) {
  return (
    <div
      className="max-w-1152px"
      m="auto"
      flex="~ wrap"
      justify="between"
    >
      {props.features.map((feature) => {
        const { icon, title, details } = feature;
        return (
          <div
            key={title}
            border="rounded-md"
            p="r-4 b-4"
            w="1/3"
          >
            <article
              bg="bg-soft"
              border="~ bg-soft solid rounded-xl"
              p="6"
              h="full"
            >
              <div
                bg="gray-light-4 dark:bg-white"
                border="rounded-md"
                className="mb-5 w-12 h-12 text-3xl flex-center"
              >
                {icon}
              </div>
              <h2 font="bold">{title}</h2>
              <p
                text="sm text-2"
                font="medium"
                className="pt-2 leading-6"
              >
                {details}
              </p>
            </article>
          </div>
        );
      })}
    </div>
  );
}