import { Colors } from "@/constants/colors";
import { Dimensions, StyleSheet } from "react-native";

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    backgroundColor: Colors.background,
    paddingTop: Dimensions.get("screen").height * 0.1,
  },
  logoContainer: {
    alignItems: "center",
    paddingTop: 8,
    paddingBottom: 4,
  },
  showLogo: {
    width: 100,
    height: 80,
  },
  showImage: {
    width: 200,
    height: 200,
    alignSelf: "center",
    resizeMode: "contain",
    bottom: 10,
  },
  showMainInfoSection: {
    alignSelf: "center",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    gap: 8,
    marginBottom: 8,
  },
  showInfoText: {
    color: "rgba(255,255,255,0.7)",
    fontSize: 13,
    fontWeight: "500",
  },
  dot: {
    width: 4,
    height: 4,
    borderRadius: 2,
    backgroundColor: "rgba(255,255,255,0.3)",
    marginHorizontal: 6,
  },
  showBannerLogoContainer: {
    width: "100%",
    height: 220,
    alignSelf: "center",
    marginTop: 8,
  },
  showBannerLogo: {
    width: "100%",
    height: "100%",
    borderTopLeftRadius: 28,
    borderTopRightRadius: 28,
  },
  infoContainner: {
    width: "100%",
    minHeight: "auto",
    paddingHorizontal: 20,
    paddingVertical: 14,
    backgroundColor: "transparent",
    flexDirection: "row",
    gap: 6,
  },
  infoLabel: {
    fontWeight: "500",
    color: "rgba(255,255,255,0.5)",
    fontSize: 15,
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 20,
    overflow: "hidden",
    letterSpacing: 0.3,
  },
  participantsDetailsContainer: {
    width: "100%",
    minHeight: 200,
    backgroundColor: "transparent",
  },
  participantWrapper: {
    width: (Dimensions.get("window").width - 32 - 24) / 3,
    alignItems: "center",
    marginBottom: 16,
  },
  participantContainer: {
    width: "100%",
    aspectRatio: 0.72,
    borderRadius: 16,
    overflow: "hidden",
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.2,
    shadowRadius: 8,
    elevation: 4,
  },
  participantSection: {
    flexDirection: "row",
    flexWrap: "wrap",
    gap: 12,
    paddingHorizontal: 16,
    paddingTop: 12,
  },
  seasonsSection: {
    width: "100%",
    minHeight: 50,
    backgroundColor: "transparent",
    flexDirection: "row",
    alignItems: "center",
    gap: 12,
    paddingHorizontal: 20,
    paddingVertical: 8,
  },
  seasonList: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
    paddingLeft: 4,
    paddingRight: 8,
  },
  seasonContainer: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: "rgba(255,255,255,0.08)",
    justifyContent: "center",
    alignItems: "center",
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: "rgba(255,255,255,0.06)",
  },
  seasonLabel: {
    color: Colors.text,
    fontWeight: "700",
    fontSize: 14,
  },
  participantLabel: {
    color: Colors.text,
    fontWeight: "600",
    textAlign: "center",
    fontSize: 12,
    marginTop: 6,
    letterSpacing: 0.1,
    width: "100%",
  },
  seasonsLabel: {
    color: "rgba(255,255,255,0.6)",
    fontWeight: "600",
    fontSize: 15,
    letterSpacing: 0.2,
  },
  detailTitle: {
    color: "rgba(255,255,255,0.95)",
    fontSize: 15,
    fontWeight: "700",
    marginTop: 10,
    marginLeft: 20,
    marginBottom: 5,
    letterSpacing: 0.2,
  },
  detailLabel: {
    color: "rgba(255,255,255,0.6)",
    fontSize: 14,
    lineHeight: 22,
    width: "90%",
    fontWeight: "400",
    marginLeft: 20,
    marginTop: 5,
  },
  startDate: {
    color: "rgba(255,255,255,0.5)",
    fontSize: 14,
    textAlign: "center",
    marginTop: 14,
    fontWeight: "500",
    letterSpacing: 0.5,
    textTransform: "uppercase",
  },
  loadingContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  sectionLoading: {
    width: "100%",
    paddingVertical: 40,
    justifyContent: "center",
    alignItems: "center",
  },
});
export default styles;