import React from "react";
import Box from "./box";
import Text from "./text";

export function DetailItemContainer({ children, border, ...props }) {
  return (
    <Box position="relative" bg="white" py={20} px={28} {...props}>
      {border && (
        <Box
          position="absolute"
          left={12}
          right={12}
          top={0}
          height={1}
          bg="light"
        />
      )}
      <Box flexDirection="row">
        <Text color="textAcik" ml={-14} mr={8}>
          1
        </Text>
        <Text color="red">İSİM</Text>
      </Box>
      <Box mt={8}>{children}</Box>
    </Box>
  );
}
export function DetailItemTitle({ children, ...props }) {
  return <Text fontWeight="600">{children}</Text>;
}
export function DetailItemSummary({ children, ...props }) {
  return (
    <Text ml={10} mt={12} color="textAcik" fontWeight="500">
      {children}
    </Text>
  );
}