import * as React from "react";
import SafeAreaView from "react-native-safe-area-view";
import { useFocusEffect } from "@react-navigation/native";
import { StatusBar, ScrollView } from "react-native";
import Text from "./text";
import AksiyonButton, { AksiyonButtonTitle } from "./aksiyonbutton";
import { Fav2, Ses1, Parmak } from "../ikonlar";
import {
  DetailItemContainer,
  DetailItemTitle,
  DetailItemSummary,
} from "./detailitem";

import Box from "./box";
import theme from "./tema";

function DetailEkrani() {
  useFocusEffect(
    React.useCallback(() => {
      StatusBar.setBarStyle("dark-content"), [];
    })
  );
  return (
    <Box as={SafeAreaView} bg="softRed" flex={1}>
      <Box as={ScrollView} p={16}>
        <Box>
          <Text fontSize={32} fontWeight="bold">
            Detay
          </Text>
          <Text color="textAcik" mt={6}>
            arapça kalem{" "}
          </Text>
        </Box>
        <Box flexDirection="row" mt={24}>
          <AksiyonButton>
            <Ses1 width={24} height={24} color={theme.colors.textAcik} />
          </AksiyonButton>
          <AksiyonButton ml={12}>
            <Fav2 width={24} height={24} color={theme.colors.red} />
          </AksiyonButton>
          <AksiyonButton ml="auto">
            <Parmak width={24} height={24} color={theme.colors.textAcik} />
            <AksiyonButtonTitle>Türk İşaret Dili</AksiyonButtonTitle>
          </AksiyonButton>
        </Box>
        <Box mt={32}>
          <DetailItemContainer>
            <DetailItemTitle>
              Yazma,çizme vb. işlerde kullanılan çeşitli biçimlerde araç.
            </DetailItemTitle>
            <DetailItemSummary>
              "Kağıt, kalem, mürekkep, hepsi masanın üstündedir." Falih Rıfkı
              Atay
            </DetailItemSummary>
          </DetailItemContainer>
          <DetailItemContainer border>
            <DetailItemTitle>
              Yazma,çizme vb. işlerde kullanılan çeşitli biçimlerde araç.
            </DetailItemTitle>
            <DetailItemSummary>
              "Kağıt, kalem, mürekkep, hepsi masanın üstündedir." Falih Rıfkı
              Atay
            </DetailItemSummary>
          </DetailItemContainer>
          <DetailItemContainer border>
            <DetailItemTitle>
              Yazma,çizme vb. işlerde kullanılan çeşitli biçimlerde araç.
            </DetailItemTitle>
            <DetailItemSummary>
              "Kağıt, kalem, mürekkep, hepsi masanın üstündedir." Falih Rıfkı
              Atay
            </DetailItemSummary>
          </DetailItemContainer>
        </Box>
      </Box>
    </Box>
  );
}
export default DetailEkrani;